I want to have a background color that spans the entire width of the page for my header, another color for my nav bar and another for my content. All of these sections of the page will be centered with margin: 0 auto;.

The solutions I see so far are having each section contain a div to wrap its content for the purpose of styling it with the margin: 0 auto; while the section itself provides the background color so that it takes the whole page width, or, having a background on the body set to repeat-x and styling the page content to appear above the appropriate background color.

I prefer to use styles but is there any way that doesn't involve wrapping each content. I feel like I'm missing some simple solution.

  • I don't think there's anything wrong with header, navigation, and content all existing in their own elements (e.g. DIVs). The vast majority of sites structure this way, and HTML5 has more semantic equivalent elements for each. Bobby Jack over 6 years ago

2 answers

This was chosen as the best answer

You could wrap all the DIV's in one container DIV and set a background on that. Otherwise, I think you have all the different ways to put on backgrounds.

Answered over 6 years ago by Sean Maher
  • Yeah, I mentioned that with the background image but it's definitely not as flexible. Thanks for the answer! Alexander Coco over 6 years ago

You can style html and body tags separately, to get 2 layers of background imagery

Answered over 6 years ago by ??????? ??????