Растянуть изображение в качестве фона

Question

Мне нужно растянуть изображение в качестве фона страницы. Неважно, будет ли страница плохо масштабироваться, каким бы ни было разрешение экрана, все изображение должно быть видно на экране. Я нашел некоторые решения в Google, но они либо не работали в Firefox2 или IE6, либо в обоих, и мне тоже нужны эти два. Я ненавижу, когда люди не обновляют свое программное обеспечение, но я все еще вижу эти браузеры в данных Google Analytics, попадающих на веб-страницу, особенно в IE6.

Есть ли хорошее кросс-браузерное решение для этого?

Answer 1

Вы можете использовать старый добрый тег img без атрибутов высоты и ширины. В вашем CSS разместите его абсолютно с низким z-индексом, установите высоту и ширину равными "100%".

Поместите все остальное на странице в другой div с более высоким z-index

Как это:

<style type="text/css">
#stretchy {
    postion: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
}
#everything_else {
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
}
</style>

...

<img src="/images/myimage.jpg" id="stretchy" />

<div id="everything_else">
    ...
</div>

См. http://axoplasm.com/lost.html для примера.

Это не совсем "фоновое изображение" (и, вероятно, не совместимый со стандартами W3C CSS), но оно работает.

Answer 2

Я не хочу угонять этот вопрос, но если у вас был этот код:

background-image: url('images/background.gif');
background-size: 100%;

Это повторяет изображение во всех текущих браузерах (IE, FF, GC, SF, OP), которое, несмотря на нежелательность, работает во всех браузерах, в отличие от метода глубины z-index (у меня сложный передний план).

Однако, если браузер вдруг получит поддержку CSS3 bg-size, говорит ли спецификация CSS3, что должно произойти? Это должно растянуть изображение или сделать то, что он всегда делал и повторять?

Answer 3

Хорошей альтернативой будет использование «статического изображения», которое постепенно исчезает до узора или сплошного цвета. Таким образом вы по-прежнему получаете фоновое изображение (каким бы большим оно ни было) и масштабируемость.

В CSS3 вы можете использовать background-size: 100%;

Firefox 3.5 поддерживает некоторые свойства CSS3, но я не верю, что они поддерживают ВСЕ, пока ... (я думаю).

Answer 4

Это невозможно в CSS1 или CSS2, однако это возможно в CSS3: Requiem4adream.wordpress.com/2006/09/29/css-stretch-background-image/

Однако это не доступно для IE6.

Альтернативой может быть использование background-repeat, или этот сайт может работать (я не проверял, работает ли он): webdesign.about.com/od/css3/f/blfaqbgsize.htm

Я знаю, что вы имеете в виду, когда пользователи не обновляют браузеры, но в какой момент вы прекращаете программировать для IE5 или даже для IE4?

Удачи,

Мэтт