OpenCart Community

Hi,

Can anyone please tell me how to apply a full screen-width black background to the header (without effecting header content - ie. keep content centered at 960px)?

Thanks
Matt

The easyest way would be to apply the background to the body for all width but verically only to cover the header(in this case would be a background image set to repeat-x).

florinsith wrote:The easyest way would be to apply the background to the body for all width but verically only to cover the header(in this case would be a background image set to repeat-x).

Thanks for the reply. I would also like a full-width background applied to the footer so I don't think that method would work? Sorry, I should have mentioned that before.

Is there a method that would allow me to have a full-width background for header and footer?

The same method could work assuming same as for the header that the height would be fixed. To use the both apply the background for header to html and for footer to body. As for the background color of the body (in the lef and right side of container), if you wish to apply one , apply it to html because if you would apply it to body it would cover the html background.

The other way for doing this involves editting the header.tpl of the theme, the footer.tpl and the stylesheet.css. Youd have to get both the header and the footer divs out of the container div (one will be above and one below), then incorporate both the header and the footer in some other divs like outheader and outfooter, apply to both the header div and the footer div the same width and left and right margins as the container width (auto) , then apply background to the outheaer and outfooter divs. This would be the second easyest way.

florinsith wrote:The other way for doing this involves editting the header.tpl of the theme, the footer.tpl and the stylesheet.css. Youd have to get both the header and the footer divs out of the container div (one will be above and one below), then incorporate both the header and the footer in some other divs like outheader and outfooter, apply to both the header div and the footer div the same width and left and right margins as the container width (auto) , then apply background to the outheaer and outfooter divs. This would be the second easyest way.

Thanks florinsith, your second option did the trick!