I've got a website with a header div that has a different background image than the main div, which is x-repeated. To center the webpage, I have some CSS for the body as follows:

body {
margin:0 auto;

When I have this, though, the background images only repeat for only the 960px wide body. Is there a way to have a centered webpage with div background images that repeat-x for 100% of the browser window?


3 answers


Restrict a container element to 960px rather than the document body itself.

Answered almost 8 years ago by Nathan Duran
  • When I restrict the container elements to 960px, the background image doesn't repeat for more than 960px. Rodney Keeling almost 8 years ago
  • Then you're doing it wrong. Nathan Duran almost 8 years ago

Both stated answers solve your problem. I almost always use centered content. shortly it looks like this:

<style type="text/css">
  text-align:center; /* IMPORTANT -- Needed for IE to center the main div */
background-repeat: repeat-x;
background-position: top left;
 margin:0 auto;
 <div id="main">
 <!-- all your other website elements go here -->

Good luck!

Answered almost 8 years ago by Menno Geelen
  • You'll need `#main { text-align: left; }` to counteract the `text-align:center` on body. Justin Hileman almost 8 years ago
  • Damn justin, you are totally right, i totally overlooked that one. Menno Geelen almost 8 years ago

Put the background image on html, or body elements, or both and have a container element that is centered and width constrained.

Answered almost 8 years ago by Tony Crockford