Community Forums › Forums › Archived Forums › Design Tips and Tricks › Minimum header colour
- This topic has 7 replies, 3 voices, and was last updated 10 years, 11 months ago by Annaedv.
-
AuthorPosts
-
April 26, 2013 at 7:34 am #37827AnnaedvParticipant
Hello.
I want a background colour just for my header. Full width. I have a png as a header, but want colour to the left and the right of this picture.
This code doesn´t help. Can I do something with the width?
#header {
http://www.advokateden.se
background-position: top center!important;
margin: 0 auto;
min-height: 400px;
overflow: hidden;
width: 1140px;
color: #67645f;
}April 26, 2013 at 2:08 pm #37915cdilsParticipantAdd background-color: #000000 (or whatever) to #header.
Also remove the width: 1140px.
Cheers,
Carrie
Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. 🙂
I host a weekly WordPress-focused podcast called Office Hours. I tweet @cdils.
April 29, 2013 at 1:23 am #38360AnnaedvParticipantHello. Sorry, that didn´t help. Nothing happend.
Anna
April 29, 2013 at 5:17 am #38381SchreckgespensterMemberYou have to write:
#header {
background-position: top center!important;
margin: 0 auto;
min-height: 60px;
overflow: hidden;
background-color: #67645f}
Edith: remove with
April 29, 2013 at 7:22 am #38394AnnaedvParticipantHello. This is strange. I´ve put in your code, and it´s there right now. Nothing happens!
April 29, 2013 at 7:37 am #38396cdilsParticipantCSS - or cascading style sheet - means that a style declaration can be overwritten by a second declaration, depending on the order it appears in your style sheet.
If I look at your CSS using Firebug, I see this:
#header {
background: url("http://www.advokateden.se/wp-content/uploads/2013/04/header.png") no-repeat;
}And this:
#header {
background-color: #67645F;
background-position: center top !important;
margin: 0 auto;
min-height: 60px;
overflow: hidden;
}The background style takes precedence over the background-color style.
If you're using the Header upload built into Genesis, there's a place you can add the background color there that will eliminate the need to add it directly to your CSS.
If you're adding your header background image directly to the CSS, then add the color in that declaration. It will look like this:
#header {
background: url("http://www.advokateden.se/wp-content/uploads/2013/04/header.png") no-repeat #67645f;
}Otherwise, if you're using a plugin to put that image header there, you'll have to add the !important declaration to override the original background style. Like this:
#header {
background-color: #67645F !important;
background-position: center top !important;
margin: 0 auto;
min-height: 60px;
overflow: hidden;
}This last option (!important) is really the least desirable, so try the other two first based on how your site's set up.
Carrie
Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. 🙂
I host a weekly WordPress-focused podcast called Office Hours. I tweet @cdils.
April 29, 2013 at 7:38 am #38397AnnaedvParticipantHello again. I have almost fixed it. I put white colour in my #inner. Then I can put a background colour in the admin. The backgrund-colour is probably the whole body or wrap. But it looks strange in my mobil...
May 3, 2013 at 1:28 am #39032AnnaedvParticipantHello again.
I just discover that my solution (with coloring #inner) did not work in Explorer.
• I use Header upload in Genesis.
• I try all your suggestion, nothing works. It just colours the area behind my header.png, not beside it. The title-area?
How can I colour all the header and not just the title area?
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.