Grow your CSS skills. Land your dream job.

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:
    [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:



    # 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?

    Rob
    # January 20, 2010 at 4:16 am

    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.

    Thanks. :D

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".