Как растянуть фоновое изображение на размер блока или всей страницы? При помощи 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 поддерживается не всеми браузерами, но мы живем не в нулевых, процент популярности старых браузеров постоянно снижается, да и были найдены сотни способов решить эту проблему, достаточно просто погуглить.
