Как сделать фоновую картинку на всю ширину?

Для изменения размеров фоновой картинки используется свойство 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. Фоновая картинка на всю ширину элемента

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 08.10.2018
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты