HTML/CSS: IMG with height equal to the height of document (not the window)

How can I ac开发者_运维问答hieve that effect?

For full horizontal and vertical try something like:

background-image: url(image.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;

or better post a your code in a http://jsfiddle.net/

Your problem most likely stems from the fact that the body tag is positioned statically, so heights of its children are relative to the html tag.

Try adding this:

body{
  position:relative;
}

It will make the body's children use the document's size rather than the browser viewport.

Here is an example of it working: http://jsfiddle.net/cP9hu/

If there's a reason that this doesn't work:

CSS Code

    #theImage {
        height: 100%;
    }

Then with jQuery you could do this:

    var docHeight = $(document).height();
    $('#theImage').css('height', docHeight);

I'm not sure how to do this in plain old JavaScript, but that's the jQuery example.

That sounds like something that might have to be handled via JavaScript. Personally I would use jQuery and something to the effect of:

$(document).ready(function() { //Runs at page load
    $(".ID_OF_IMAGE").each(function() { //calls the anon function for the id tag specified
        /*sets the height to the max of three methods of height measurement
        diff browsers detect doc height differently.*/
        this.height = Math.max(
            //gets the larger between doc height and body height
            Math.max(document.body.clientHeight, document.documentElement.clientHeight),
            Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
            Math.max(document.body.scrollHeight, document.documentElement.scrollHeight))
    });
});

Alternately you can set the image as a background of a div or the body and use the repeat-y css property.

body { //also works for div's
    background-image:url('image.jpg');
    background-repeat:repeat-y;
}

-SB