Резиновое фоновое изображение

Рейтинг: 2Ответов: 2Опубликовано: 11.04.2011

Возможно как-то сделать, чтобы фоновое изображение в блоке div было резиновым, пропорции в процентах не действуют?

Ответы

▲ 2

Можно, но это относится к css3, и не все браузеры это понимают.
background-size.

Чтобы сделать изображение резиновым, подложите под контент изображение:

<div style="height:400px;width:70%;overflow:hidden;position:relative">  
    <img src="img.jpg" alt="" style="position:absolute;left:0;top:0;width:100%;height:100%" />  
    <div style="position:absolute;left:0;top:0;z-index:1;width:100%;height:100%">content</div>  
</div>
▲ 2

Нормальным людям посвящается!

Приём css3:

div {
width:1500px;
heigth:200px;
background-image: url(/bg.jpg);
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
}

Что произойдёт?

Браузер запихнёт в такой узко-широкий блок картинку сколь угодно гигантского размера (разумеется,в качестве подложки),так же браузер растянет и масштабирует даже однопиксельную картинку до размеров блока.

ПОЯСНЕНИЕ:

Первые 2-а аттрибута задают размеры блока по ширине=1500 пикселов и высоте=200 пикселов, третий аттрибут-адрес картинки,четвёртый,пятый и шестой аттрибуты-масштабируют картинку по размерам блока div для "w3с-браузеров",для Firefox и для Вебкит-браузеров типа Google Chrome,Apple Safari соответственно.