add background image to beautiful theme header

[scottz]

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?

[Brad Dalton]

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.

---

Tutorials for StudioPress Themes & WooCommerce.

[scottz]

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.

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?

[scottz]

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

[Brad Dalton]

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.

---

Tutorials for StudioPress Themes & WooCommerce.

[Brad Dalton]

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.,

---

Tutorials for StudioPress Themes & WooCommerce.

[scottz]

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.

[Brad Dalton]

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

---

Tutorials for StudioPress Themes & WooCommerce.

[scottz]

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?

[Brad Dalton]

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.

---

Tutorials for StudioPress Themes & WooCommerce.

[scottz]

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.

[wario]

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