Community Forums › Forums › Archived Forums › General Discussion › add background image to beautiful theme header
Tagged: background image, site-header
- This topic has 11 replies, 3 voices, and was last updated 8 years, 4 months ago by
wario.
-
AuthorPosts
-
July 11, 2014 at 2:46 pm #113947
scottz
MemberI 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 #114001Brad Dalton
ParticipantIf 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.
July 12, 2014 at 10:50 am #114028scottz
MemberThanks 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?
July 16, 2014 at 10:55 am #114543scottz
MemberBrad, 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 #114547Brad Dalton
ParticipantIt 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.
July 16, 2014 at 11:23 am #114548Brad Dalton
ParticipantOr 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.,
July 16, 2014 at 12:54 pm #114560scottz
MemberYeah, duh, should have sent that.
UN: scottz
PW: scocalNever 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 #114565Brad Dalton
ParticipantThis 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
July 16, 2014 at 4:22 pm #114577scottz
MemberBrad,
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:
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 #114581Brad Dalton
ParticipantThat'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.
July 16, 2014 at 5:25 pm #114586scottz
MemberI 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 #138968wario
MemberHey 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.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.