Apparition – Upload Header Image and keep full banner behind

[jlwalker]

I am using the Apparition theme.

I have uploaded a new banner image for the header but when I do that, the black stripe that used to go across the entire width of the screen is now just the width of the header.

What CSS do I alter or add to get the black stripe to run the full width of the page?

This is what I want ... http://demo.studiopress.com/apparition/templates/blog/

This is what I have ... http://austinsharpphotography.com/

Thanks!

[colson]

on the header you have:
#header {
background: url("http://austinsharpphotography.com/wp-content/uploads/2013/07/austin_sharp_header1.jpg") no-repeat scroll 0 0 transparent;
}

remove transparent and put this:

#header {
background: url("http://austinsharpphotography.com/wp-content/uploads/2013/07/austin_sharp_header1.jpg") no-repeat scroll 0 0 #111111;
}

[jlwalker]

This reply has been marked as private.

[colson]

Jlwalker if you were replying to my answer I can not see it... not sure if you were asking me a question or someone else privately.

[jlwalker]

Thanks for letting me know you could not see my reply colson.

If I view the source for the page, I can see the change you have suggested. But, that code is not in the style.css file.

How do I change that within WP when it is not in style.css?

[colson]

I am just getting my son breakfast give me 5 minutes and I will get back to you , sorry

[colson]

This reply has been marked as private.

[jlwalker]

Unfortunately that did not fix it. By any chance do you have any other ideas?

[colson]

When I look in firebug I am not seeing any background-color now for the #header did you not save it maybe?

But the way I would do it is remove the header from the custom header and add it the following way, this will take a bit of css but if you want I can walk you thru it. Or you can just double check your #header to see if you actually have the header background color saved.

[jlwalker]

I am happy to remove the custom header if I can get the header loaded and the black the full width of the page. I appreacite the help.

[jlwalker]

This is what is showing in the css file now ...

#header {
background-position: top center !important;
background-color: #111111!;
min-height: 120px;
overflow: hidden;
width: 100%;
}

[colson]

ok you have just ! at the end of your background color, you need !important try that. Or if you want we can go thru doing it the other way but that will take a bit of time.

[jlwalker]

Now that I have removed the custom header, the black did not come back full width. This is so bizarre!

[colson]

This reply has been marked as private.

[colson]

ok looks like you got it.

[jlwalker]

That did it. I did not realize that I needed the word important as well. Thank you so much for your help. I really appreciate it!

[colson]

if you decide you want to do it the way I would just let me know and I can help you do that also.

Corinne

[colson]

you are going to have to add some css to your media queries for the responsive as you can see the header moves off the screen in the smaller sizes... I am heading out but if you can't get it I can help you with it later.

[leepettijohn]

Hello, I think I'm having some of the same issues but I can't see all the replies. I'm especially interested in the #52950. I need to change the CSS that's being put on the HTML page.

Here is the site I'm working on. - http://lifestylesuccessinc.com

Thanks

[Susan]

#52950 (not sure why it was marked private) is:

ok I am not sure why the header background color is being overwritten but for now you can go to #header in your style.css and add (actually looks like you have it already) background-color: #111111!important;

put !important after #111111 Let me know if that works for now.

Also - you would be better served starting your own thread; if you add on to an older thread, you are not likely to have fresh eyes taking a look at it.

[Author]

Posts