Using html in combination with body for Background images

[marcuswhybrow]

I wanted to implement a background image that has a greater width than the main content area.
Yet I also needed a repeating image bahind that single background image as depicted in this image:
[img]http://s3.amazonaws.com/ember/TZdNkc6PnNiYrgTyNnuCocWKfRNG65em_m.jpg[/img]

As you can see the background image extends beyond the browser windows horisontally (thus potentially overflowing the body element).

Initially the repeated background behind this image was the background-image property of the body, and the singluar background image was the background image of a div which was centered. In every onfiguration of this type if the singular background image was visibly extending beyond the horizontal width of the body (the browser window) a horizontal scrolbar would appear. This scroll bar is only nessassery once the grey box (content area) extends out of the body.

The only sollution I have come up with is to have the repeating background image as the background-image (top left repeat-x) to the html element, and the singular image as the background-image (top center no-repeat) of the body element. I have not seen this done anywhere else and it seems to work in Safari/Firefox (not sure about IE yet).

So my question is really is there some unwritten rule that the html element should not have a background image in this way.

The code to create that example image is here:

Code:

[noahgelman]

You don’t really need to add an image to the html tag. What you could do is add the repeating image to the body– top left repeat-x

And then the one single image in a page wrap inside the body– top center no-repeat

Would that work for you or did I interpret your situation wrong?

[marcuswhybrow]

@noahgelman Yes your solution does work if I added an additional wrap

After some further searching I found: http://www.webdesignerwall.com/tutorials/how-to-css-large-background/ which firstly suggests that method and then the html and body method in the exact way I imagined.

@Robskiwarrior Thanks also. I’m going to go ahead with the html and body combination then.

Thanks. :D

[Author]

Posts