How to Add Header Background

Tagged: Ally Header Background

This topic has 8 replies, 2 voices, and was last updated 9 years, 11 months ago by Eric.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
April 25, 2014 at 2:14 pm #11894
PandaArt
Customer
Hello Wes! I am missing something here on how to add a header background. Help?

When a background is loaded into .site-header .wrap – it displays but overlays the header logo (Custom Header upload).

So that the header displays correctly in mobile, I need the header background to stay in the background. Then the Custom Header can be loaded – and the Custom Header floats to the correct left-side position when viewed in mobile.

What code do I need to have in order to create a header background that stays in the ‘background’- and also allows used of an uploaded Custom Header?

Thanks!
April 25, 2014 at 2:15 pm #11895
PandaArt
Customer
This reply has been marked as private.
April 26, 2014 at 1:19 pm #11908
Eric
Customer
If you want to add a background to the header (separate from the logo) then add one to the .head-wrap in your css.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
April 26, 2014 at 8:52 pm #11918
PandaArt
Customer
When I do that, it loads as left-justified – instead of centering over the content wrap.

.head-wrap in this theme refers to the top horizontal slice of the header.

Suggestions for getting a background added to the .head-wrap – to load over the content area only?

Thanks!
April 26, 2014 at 8:53 pm #11919
PandaArt
Customer
This reply has been marked as private.
April 27, 2014 at 12:32 am #11921
Eric
Customer
If I understand you correctly, you want to add a background behind the header, that is not full width, but centered, right? If that’s what you’re looking for, just add it to the head-wrap and add a width to your head-wrap in your css….use 1140px if thats the size of everything else. Then it should show up in that same area….if it’s not centered, just let me know and I can take a look at it while you have it active.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
April 28, 2014 at 11:49 am #11954
PandaArt
Customer
Hi Eric! Please help! When a width is added to .head-wrap – the entire header left-justifies.

Due to the coding of this theme (which I love!) – adding a background image to the header is unbelievably difficult! This must be a common need – adding the work-around to FAQs might be helpful.

I am sending the link to the test website as a Private Reply.

Please let me know if you receive the link?
Thanks!
April 28, 2014 at 11:55 am #11955
PandaArt
Customer
This reply has been marked as private.
April 28, 2014 at 10:36 pm #11991
Eric
Customer
Trust me, you’ll get it working. It’s all pretty easy, once you know how to do it…and that goes for all Genesis themes (since they all work the same).

Once you add the width, it will float to the left, as you’ve noticed. The reason it does that is because you also need to add – margin: 0 auto; to the same .head-bg code. After you add that and the width it will definitely show up in the middle. Most people usually just upload a logo and leave the background as it is since this is how it’s setup by default. So that’s why you would need to add these two modifications since what you’re doing is a customization.

I just tested the above suggestions on your site and everything worked fine. Let me know if it shows up when you try it.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.