Minimum header colour

Community Forums Forums Design Tips and Tricks Minimum header colour

This topic is: not resolved

This topic contains 7 replies, has 3 voices, and was last updated by  Annaedv 1 year, 4 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #37827

    Annaedv
    Participant
    Post count: 39

    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 {
    background-position: top center!important;
    margin: 0 auto;
    min-height: 400px;
    overflow: hidden;
    width: 1140px;
    color: #67645f;
    }

    http://www.advokateden.se
    #37915

    cdils
    Participant
    Post count: 421

    Add 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 Genesis-focused podcast called Genesis Office Hours. I tweet @cdils.

    #38360

    Annaedv
    Participant
    Post count: 39

    Hello. Sorry, that didn´t help. Nothing happend.

    Anna

     

    #38381

    Schreckgespenster
    Participant
    Post count: 65

    You have to write:

    #header {
    background-position: top center!important;
    margin: 0 auto;
    min-height: 60px;
    overflow: hidden;
    background-color: #67645f

    }

    Edith: remove with

    #38394

    Annaedv
    Participant
    Post count: 39

    Hello. This is strange. I´ve put in your code, and it´s there right now. Nothing happens!

     

    #38396

    cdils
    Participant
    Post count: 421

    CSS – 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 Genesis-focused podcast called Genesis Office Hours. I tweet @cdils.

    #38397

    Annaedv
    Participant
    Post count: 39

    Hello 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…

    #39032

    Annaedv
    Participant
    Post count: 39

    Hello 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?

     

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

You must be logged in to reply to this topic.