• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

add background image to beautiful theme header

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › add background image to beautiful theme header

This topic is: not resolved

Tagged: background image, site-header

  • This topic has 11 replies, 3 voices, and was last updated 8 years ago by wario.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 11, 2014 at 2:46 pm #113947
    scottz
    Member

    I searched posts on the beautiful theme customization and thought I would find something.

    I want to add a repeating background image to the header area, you know, where the site logo and top menu go?

    .site-header .wrap {
    padding-bottom: 40px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 46px;
    }

    This was all I found, and tried adding something like this...

        background-attachment: scroll;
        background-clip: border-box;
        background-color: #ffffff;
        background-image: url("http://www.oluplaw.com/blog/wp-content/uploads/2014/07/OLP-blog-BG21.png");
        background-origin: padding-box;
        background-position: left center;
        background-repeat: repeat;
        background-size: auto auto;

    and nothing happened. What am I doing wrong, how is this site set up anyway?

    July 12, 2014 at 3:05 am #114001
    Brad Dalton
    Participant

    If you look in the functions file you'll see this code.

    The 1st snippet is for the header logo and the second is for the full width background image after the header,

    //* Add support for custom header
    add_theme_support( 'custom-header', array(
    	'default-text-color'     => '000000',
    	'header-selector'        => '.site-title a',
    	'header-text'            => false,
    	'height'                 => 120,
    	'width'                  => 320,
    ) );
    
    //* Add support for custom background
    add_theme_support( 'custom-background', array(
    	'default-color'         => 'ffffff',
    	'default-image'         => get_stylesheet_directory_uri() . '/images/header-banner.png',
    	'wp-head-callback'      => 'beautiful_background_callback',
    ) );
    

    Simply change the image in your images folder.


    Get Help – Book Consultation.

    July 12, 2014 at 10:50 am #114028
    scottz
    Member

    Thanks Brad for the quick response, but that's not what I'm trying to do. Take a look at the image in my layout.

    This is layout I'm trying to do.

    I'm simply trying to run a repeating BG image in the header area where the logo and menu items sit. Is this site not set up in a way that allows me to do that? Seems I've done this exact same thing on dozens of sites, but I'm struggling to make it happen on this one.

    Now that you can see my layout, does my question make more sense?

    July 16, 2014 at 10:55 am #114543
    scottz
    Member

    Brad, does my question make any more sense, and is it possible to do this without having to completely reconfigure the whole thing?

    July 16, 2014 at 11:16 am #114547
    Brad Dalton
    Participant

    It looks fairly easy just hard to test because its not a alive site so i don't have access to the code or image.

    Link to the image and your site please.

    I think all you need to do is hook the image in after the header from your functions file and images folder and add repeat.


    Get Help – Book Consultation.

    July 16, 2014 at 11:23 am #114548
    Brad Dalton
    Participant

    Or you can simply replace the image in your images folder and make sure the height matches whats in the code and it will repeat according to the functions.

    Tested and works.,


    Get Help – Book Consultation.

    July 16, 2014 at 12:54 pm #114560
    scottz
    Member

    Yeah, duh, should have sent that.

    http://www.oluplaw.com

    UN: scottz
    PW: scocal

    Never tried that with hooks, I'm pretty inept at php in general, but I'm willing to give it a shot. What code would I use?

    Again, I'm so appreciative of your kind response.

    July 16, 2014 at 1:43 pm #114565
    Brad Dalton
    Participant

    This is the solution

    You can simply replace the image in your images folder and make sure the height matches whats in the code and it will repeat according to the functions.

    If you can't manage, your are welcome to use the contact form on my site. Thanks


    Get Help – Book Consultation.

    July 16, 2014 at 4:22 pm #114577
    scottz
    Member

    Brad,

    I know you must be busy, hate to keep bothering you with this. Frankly I'm kinda confused by

    You can simply replace the image in your images folder and make sure the height matches whats in the code and it will repeat according to the functions.

    I think I missed a step or something.

    All I want to do is repeat an image in the top header area, and float the logo image over it, like I've done a million times in genesis, only this theme does not seem to allow me to do that. The header area that I can repeat an image inside is set to 1140 px (or something) and when I tried hacking the .css like so

    .site-header .wrap {

    background-attachment: scroll;
    background-clip: border-box;
    background-color: #444;
    background-image: url("http://www.oluplaw.com/blog/wp-content/uploads/2014/07/HEADBG2.png");
    background-origin: padding-box;
    background-position: 0px 10px;
    background-repeat: repeat;
    background-size: auto auto;
    max-width: 100%;
    padding-bottom: 40px;
    padding-left: 250px;
    padding-right: 250px;
    padding-top: 40px;

    }

    I got this:

    http://www.oluplaw.com/blog/

    The BG image floats behind, but the rest is kinda messed up, obviously. And I think I might be able to hack around and possibly get it to look the way I want, but then again, I may mess it up even more.

    I'm not going to pretend that I understand how the php relates to .css and the layout here, and I don't expect you to explain it to me either. So if it's easier for you to simply fix this for me, somehow, I'm cool with paying you whatever.

    I just want to make sure you understand what I want to do. You've seen my layout, you've seen what I tried to do.

    Are we on the same page?

    July 16, 2014 at 4:43 pm #114581
    Brad Dalton
    Participant

    That's is all i can help you with.

    Someone else might want to post a different solution however the one i posted is tested and does what you originally asked for based on your sceenshot.


    Get Help – Book Consultation.

    July 16, 2014 at 5:25 pm #114586
    scottz
    Member

    I just don't think you understand what I'm trying to do.

    Changing this image is not what I need to do.

    'default-image' => get_stylesheet_directory_uri() . '/images/header-banner.png',

    Yes, your solution would work fine if that was the image I need to change. I want to change the image in the header above this.

    It seems so simple.

    January 29, 2015 at 12:19 pm #138968
    wario
    Member

    Hey scottz,

    If you're trying to modify the full width header section to have a repeating background underneath your header logo and header navigation or widget area, you just need to target the .site-header in your styles.css. In your first post, you were targeting the wrap class within the header:

    .site-header .wrap {
    padding-bottom: 40px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 46px;
    }

    Just remove the .wrap after .site-header:

    
    .site-header  {
    background-attachment: scroll;
    background-color: #444;
    background-image: url(“http://www.oluplaw.com/blog/wp-content/uploads/2014/07/HEADBG2.png”);
    background-repeat: repeat;
    }
    

    That should do the trick. Just replace the image location in quotes with wherever your image is.

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble