Как сделать фоновую картинку на всю ширину?
Для изменения размеров фоновой картинки используется свойство background-size. Значение 100% масштабирует изображение на всю доступную ширину, при этом высота будет задана автоматически, исходя из пропорций картинки (пример 1).
Пример 1. Использование background-size
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ширина фона</title> <style> body { background-image: url(/example/image/shark.jpg); /* Адрес картинки */ background-size: 100%; /* Ширина картинки */ } </style> </head> <body> </body> </html>
Результат данного примера показан на рис. 1. Обратите внимание, что по умолчанию картинка повторяется по вертикали. Если повторение запретить через background-repeat, то фоновая картинка будет занимать лишь часть веб-страницы.
Рис. 1. Фоновая картинка на всю ширину веб-страницы
Часто также требуется ограничить высоту фона фиксированным значением, а ширину оставить 100%. Для этого используем свойство height для указания высоты, а для background-size пишем значение cover (пример 2).
Пример 2. Использование background-size
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ширина фона</title> <style> div { height: 250px; /* Высота блока */ background-image: url(/example/image/shark.jpg); /* Адрес картинки */ background-size: cover; /* Заполнение */ } </style> </head> <body> <h1>Домашняя акула</h1> <div></div> </body> </html>
Результат данного примера показан на рис. 2.
Рис. 2. Фоновая картинка на всю ширину элемента
Автор: Влад Мержевич
Источник: webref.ru