HTML/CSS: IMG с высотой, равной высоте документа (не окна)

Question

Как я могу добиться этого эффекта?

Answer 1

Для полного горизонтального и вертикального попробуйте что-то вроде:

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;

или лучше отправьте ваш код в http://jsfiddle.net/

Answer 2

Скорее всего, ваша проблема связана с тем фактом, что тег body позиционируется статически, поэтому высота его дочерних элементов относительно тега html.

Попробуйте добавить это:

body{
  position:relative;
}

Это заставит детей тела использовать размер документа, а не окно просмотра браузера.

Вот пример того, как это работает: http://jsfiddle.net/cP9hu/

Answer 3

Если есть причина, по которой это не работает:

CSS код

    #изображение {
        высота: 100%;
    }

Затем с помощью jQuery вы можете сделать это:

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

Я не уверен, как это сделать в простом старом JavaScript, но это пример jQuery.

Answer 4

Это звучит как что-то, что может быть обработано с помощью JavaScript. Лично я бы использовал jQuery и что-то вроде:

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

В качестве альтернативы вы можете установить изображение в качестве фона элемента div или тела и использовать свойство repeat-y css.

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

-SB