Using html in combination with body for Background images
# January 19, 2010 at 9:19 pm
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:
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:
html and body background image combination
# January 20, 2010 at 2:26 am
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?# January 20, 2010 at 4:16 am
This reply has been reported for inappropriate content.
Nope you can style the HTML element fine – its good for setting background image on it, especially as some people like the flexibility of giving their body tag a width.
So no, there is no unwritten rule :)# January 20, 2010 at 12:36 pm
@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.
You must be logged in to reply to this topic.