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

Похоже, что-то, что может быть обработано с помощью 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

Answer 4

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

Код CSS

    #theImage {
        height: 100%;
    }

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

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

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