Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #13671

    Hi Want want the background for the header to be black using the dark-skin streched layout.

    I have tried the below but have been unsuccessful

    This just changes the background container, but I want it to stretch out:

    #header .container{
    background-color: black;
    }

    This does the same as above.

    #header{
    background-color: black;
    }

    I tried adding .container_wrap but it changes it for all .container_wrap elements on the page.

    #header  .container_wrap, .container{
    background-color: black;
    }

    I want to change <div class=”container_wrap” id=”header”> to black. Any help

    #80110

    Hi flyingbark,

    Even with the layout set to stretched #header is set only to 978px wide which is why you’re not able to change the background color on either side of the header.

    What you can do is create a background image with the black bar across the top the same height as the header (100 – 150px) then set the BODY to repeat the background image across the top.

    This is the CSS you would use:

    body {
    background: #222222 url(images/file-name-of-image.png) repeat-x top left;
    }

    Basically, this is a workaround that will give header the appearance of a black background all the way across but without targeting the header DIV specifically. If that makes sense.

    Note: Your background only needs to be 1px in width if you plan on using just a solid color.

    Hope this helps!

    Regards,

    Mya

    #80111

    Hi flyingbark,

    Try to use this code:

    #wrap_all {
    background-color: #222;
    }

    #header {
    width: 100%;
    background-color: black;
    }

    If it doesn’t work, try to use this one instead:

    #wrap_all {
    background-color: #222 !important;
    }

    #header {
    width: 100% !important;
    background-color: black !important;
    }

    Hope this helps. :)

    Regards,

    Ismael

    #80112

    Thank you all for the input. I only tried Ismael’s first suggestion nad it worked so I didn’t try an other but thanks for all suggestions.

    #wrap_all {

    background-color: #222;

    }

    #header {

    width: 100%;

    background-color: black;

    }

    #80113

    Hi flyingbark,

    Glad that we could help you. The second code is just the same with first one, I just added the !important, so the styling won’t be overriden. :)

    Cheers,

    Ismael

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

The topic ‘Black header background using stretched layout’ is closed to new replies.