Растянуть фон HTML CSS

[toc depth=»2″ listtype=»ul» title=»Содержание»]

Как растянуть фоновое изображение на размер блока или всей страницы? При помощи HTML и CSS?

Физической возможности сделать это при помощи правил CSS нет, есть только обходной путь.

Растянуть фон HTML CSS: подвижный фон

Сейчас попробуем сэмулировать правило background-attachment: scroll для растягиваемого фона.

Это можно сделать при помощи 2-х блоков, первый блок – фон, второй блок – содержимое над фоном. Блок-фон просто располагается под блоком-содержимым и все. Приступим:

То есть у нас есть блок-фон, в котором находится изображение img, которое служит фоном; и блок-содержимое, в котором находиться та информация, которая должна быть над фоном.

Теперь немного правил на CSS:

.background{
   position: absolute;
   z-index: 0;
   width: 100%;
}
.content{
   position: relative;
   z-index: 1;
   /* другие какие-то правила, для оформления*/
}

Все. Заметил, что у одного блока position:absolute, а у другого position:relative? Это не опечатка. Так действительно будет работать, и при этом, если тебе нужно растянуть фон страницы, то есть в блоке-содержимом (div.content) будет находится всё содержимое страницы, и этого содержимого будет много, то появятся полосы прокрутки (если бы мы поставили у .content position:absolute, то прокрутки не было бы)

Как это работает можешь посмотреть вот здесь: Demo

Растянуть фон HTML CSS: неподвижный фон

Попробуем сделать с нашим фоном аналог background-attachment: fixed.
Для этого заменим position:absolute на position:fixed в правиле CSS для тэга background:

.background{
   position: fixed;
   z-index: 0;
   width: 100%;
}

Да, position:fixed поддерживается не всеми браузерами, но мы живем не в нулевых, процент популярности старых браузеров постоянно снижается, да и были найдены сотни способов решить эту проблему, достаточно просто погуглить.