Give help. Get help.

  • # 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:


    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 12:36 pm

    @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.

    @robskiwarrior 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)

You must be logged in to reply to this topic.