Как растянуть фоновый рисунок по всей ширине/высоте блока?
Уже не первый раз слышу этот вопрос, поэтому решил оформить в виде статьи. Профессионалы вряд ли подчерпнут здесь что-то новое, статья рассчитана исключительно для новичков.
Что бы не было недоразумений (ну вдруг, кто-то не знает?), нужно сказать о таком распространенном случае, когда нужно растянуть фон по всей ширине или высоте блока. А фоновый рисунок при этом является простым градиентом. Если тянем по ширине
- создаем картинку с шириной в 1px и необходимой высотой;
- ставим её на фон и устанавливаем, что бы фон повторялся только по ширине:
<div style="background:url(bg.png) repeat-x;"></div>
Если растягиваем по высоте — заменяем на repeat-y.
Теперь к непосредственной теме статьи. Сразу хочу напомнить, что все используемые форматы изображений в веб — растровые, т.е. даже при незначительном растяжении картинки, её
качество будет значительно ухудшаться. Поэтому до CSS3 эта возможность в таблицах стилей не предусматривалась.
Но не забываем, что на календаре – «Веб-два-ноль». IE5 давно исчез, IE6 медленно, но верно движется к тому же итогу. Некоторые современные браузеры уже поддерживают формат
SVG — который так и расшифровывается «Scalable Vector Graphics» — масштабируемая векторная графика. Т.е. размеры картинок в этом формате можно свободно изменять без всякой потери качества.
Видимо поэтому в CSS3 будет свойство
background-size, непосредственно отвечающее за масштабирование фона. Opera, Safari и Konqueror уже поддерживают это свойство через
-o-background-size,
-webkit-background-size and
-khtml-background-size, соответственно. К сожаленью свойства
-ie-background-size не существует и врядли оно появится в ближайшем времени. Поэтому, как обычно, будем извращаться.
Итак, если уж возникла суровая необходимость привязать размеры фона к размерам блока можно использовать следующий приём.
Создается дополнительный блок-обертка, для которого устанавливается position:relative. В него
- помещается картинка (<img>), используемая в качестве фона.
- собственно, блок, к которому нужно привязать фон. Блок обязательно должен иметь position:absolute
Для обоих элементов устанавливаются
width:100% и
height:100%. Теперь их размеры привязаны к размерам блока-обертки и изменяются вместе с ним. В данном случае, при абсолютном позиционировании блока, он помещается поверх картинки и она становится «фоном».
Ниже пример. Для наглядности, вместо блока используется таблица (естественно, можно использовать что угодно).
<style type="text/css">
/* Блок-обертка */
#table-outer {
position:relative;
width:300px;
height:300px;
}
/* Фоновый рисунок */
#table-bg {
width:100%;
height:100%;
}
/* Фон и таблица растягиваются по всей ширине и высоте блока-обертки */
#self-table {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
/* Ячейка таблицы */
#self-table td {
border:1px solid #999;
text-align:center;
}
</style>
<!-- Блок-обертка -->
<div id="table-outer">
<!-- Фоновый рисунок -->
<img id="table-bg" src="table-bg.png" alt="Фоновый рисунок" />
<!-- Таблица -->
<table id="self-table">
<tr><td>1.1
</td> <td>1.2
</td> <td>3.1
</td></tr>
<tr><td>2.1
</td> <td>2.2
</td> <td>3.2
</td></tr>
<tr><td>3.1
</td> <td>3.2
</td> <td>3.3
</td></tr>
</table>
</div>
Ссылки:
