Black header background using stretched layout « Support Forum | Kriesi.at

Black header background using stretched layout

5 posts from 3 voices

Tags:

No tags yet.

flyingbark
Member
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
Posted 11 months ago #
Mya
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
Posted 11 months ago #

Ismael
Moderator

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

Posted 11 months ago #

flyingbark
Member

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;
}

Posted 10 months ago #
Ismael
Moderator

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

Posted 10 months ago #

This topic has been closed to new replies.