Community Forums › Forums › Archived Forums › Design Tips and Tricks › Apparition – Upload Header Image and keep full banner behind
Tagged: apparition, full width, header
- This topic has 21 replies, 4 voices, and was last updated 10 years, 8 months ago by Susan.
-
AuthorPosts
-
July 27, 2013 at 11:55 am #52844jlwalkerMember
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!
July 27, 2013 at 6:46 pm #52890colsonKeymasteron 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;
}July 27, 2013 at 7:52 pm #52900jlwalkerMemberThis reply has been marked as private.July 28, 2013 at 7:39 am #52939colsonKeymasterJlwalker 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.
July 28, 2013 at 7:51 am #52943jlwalkerMemberThanks 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?
July 28, 2013 at 8:00 am #52946colsonKeymasterI am just getting my son breakfast give me 5 minutes and I will get back to you , sorry
July 28, 2013 at 8:29 am #52950colsonKeymasterThis reply has been marked as private.July 28, 2013 at 8:33 am #52951jlwalkerMemberUnfortunately that did not fix it. By any chance do you have any other ideas?
July 28, 2013 at 8:57 am #52952colsonKeymasterWhen 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.
July 28, 2013 at 9:15 am #52954jlwalkerMemberI 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.
July 28, 2013 at 9:16 am #52955jlwalkerMemberThis 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%;
}July 28, 2013 at 9:18 am #52956colsonKeymasterok 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.
July 28, 2013 at 9:18 am #52957jlwalkerMemberNow that I have removed the custom header, the black did not come back full width. This is so bizarre!
July 28, 2013 at 9:19 am #52959colsonKeymasterThis reply has been marked as private.July 28, 2013 at 9:20 am #52960colsonKeymasterok looks like you got it.
July 28, 2013 at 9:21 am #52961jlwalkerMemberThat 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!
July 28, 2013 at 9:21 am #52962colsonKeymasterif you decide you want to do it the way I would just let me know and I can help you do that also.
Corinne
July 28, 2013 at 9:22 am #52963colsonKeymasteryou 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.
August 19, 2013 at 12:23 pm #57372leepettijohnMemberHello, 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
August 19, 2013 at 12:32 pm #57375SusanModerator#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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.