2

So I have this very basic question that I was wondering about. I just set a background through css with

body {
width: 960px;
margin: 0 auto;
background-image: url("../img/background2.jpg");
}

Why is the image showing up at both sides as well and not only in the center 960 pixels? If I put my background image in a navigation class selector, it does work:

.container {
background: #099;
}

Why is that? Shouldn't the body image be restricted by the width that I set?

Here is my code: http://jsfiddle.net/nB22j/

Also, is there any use for the .container selector if I can just put everything in body {} ? (In this case I do want the background to fill the full browser so I can put my background in body {} but I'm just wondering...) I'm not sure anymore why I added the container div in the first place. Any reason for it to exist?

bgrt
  • 35
  • 7

1 Answers1

3

Because, if you set no background to HTML , body's background is applied to HTML too.

Just add this : DEMO

html {
background:#fff;/* or any color/image/gradient you want */
}

and your background for body will only be drawn where body stands.

See W3C for more infos.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129