The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Using html in combination with body for Background images

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #27636

    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:


    html and body background image combination


    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?


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

    After some further searching I found: which firstly suggests that method and then the html and body method in the exact way I imagined.

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

    Thanks. :D

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.