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

Question

How can I achieve this effect?

Answer 1

For a complete horizontal and vertical setup, 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 your code at http://jsfiddle.net/

Answer 2

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

Try adding this:

body{
  position:relative;
}

This will cause the children of the body to use the size of the document, not the browser window.

Here is an example of its operation: http://jsfiddle.net/cP9hu/

Answer 3

, :

CSS

    #theImage {
        height: 100%;
    }

jQuery :

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

, JavaScript, jQuery.

Answer 4

This is similar to what you might have to handle with JavaScript. Personally, I would use jQuery and something like:

$(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))
    });
});

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

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

-SB