Как растянуть фон на всю ширину окна?
Растянуть фоновую картинку на всю ширину окна браузера с помощью CSS3.
Решение
Для масштабирования фона предназначено свойство background-size , в качестве его значения указывается 100%, тогда фон будет занимать всю ширину окна браузера. Для старых версий браузеров следует использовать специфические свойства с префиксами, как показано в примере 1.
Пример 1. Растягиваемый фон
HTML5 CSS 2.1 IE Cr Op Sa Fx
Растягиваемый фон Результат данного примера показан на рис. 1.
Рис. 1. Вид фона при уменьшенном размере окна
При увеличении размера окна браузера фон также начнёт расширяться, это приведет к ухудшению вида картинки (рис. 2).
Рис. 2. Вид фона при увеличенном размере окна
CSS по теме
Статьи по теме
- Как изменить размер фоновой картинки через CSS3
- Как растянуть фон на всю ширину окна?
- Масштабирование фона
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Растянуть картинку на весь блок
Чтобы растянуть картинку на весь блок, надо указать свойство background-size: cover .
.bg < background: url(image.jpg) no-repeat; background-size: cover; >
Обновлено: 01 ноября 2020
Комментарии
Авторизуйтесь, чтобы добавлять комментарии
- Вставить картинку
- Градиент
- 4 видов границ (border)
- 4 видов тени
- Спрайт
- Сделать картинку чёрно-белой
- Растянуть картинку на весь блок
- Несколько картинок на фоне
- Изменить прозрачность объекта
Как сделать фоновую картинку на всю ширину?
Для изменения размеров фоновой картинки используется свойство background-size. Значение 100% масштабирует изображение на всю доступную ширину, при этом высота будет задана автоматически, исходя из пропорций картинки (пример 1).
Пример 1. Использование background-size
Результат данного примера показан на рис. 1. Обратите внимание, что по умолчанию картинка повторяется по вертикали. Если повторение запретить через background-repeat, то фоновая картинка будет занимать лишь часть веб-страницы.
Рис. 1. Фоновая картинка на всю ширину веб-страницы
Часто также требуется ограничить высоту фона фиксированным значением, а ширину оставить 100%. Для этого используем свойство height для указания высоты, а для background-size пишем значение cover (пример 2).
Пример 2. Использование background-size
Домашняя акула
Результат данного примера показан на рис. 2.
Рис. 2. Фоновая картинка на всю ширину элемента
См. также
- background-size
- Анимация ссылок при наведении
- Масштабирование фона
- Несколько фоновых картинок
- Установка фона и градиента
Как растянуть картинку на весь экран?
Если в пути к картинке содержатся пробелы — url(img/test image.jpg) — следует поступить, как предписывает данный комментарий. Спасибо.
2 мар 2016 в 7:27
Спасибо большое! Очень помогло
22 мая 2020 в 10:43
Отслеживать
ответ дан 2 апр 2012 в 14:58
Вячеслав Кириченко Вячеслав Кириченко
1,344 8 8 серебряных знаков 21 21 бронзовый знак
не сработает если реальная ширина картинки будет меньше ширины окна браузера.
2 апр 2012 в 15:09
Важно не забывать кавычки ставить: background: url(«img/image.jpg») , иначе на экранах с некоторым разрешением внизу может появляться «полоса»— опускается самая верхняя часть фоновой картинки.
Отслеживать
ответ дан 19 фев 2016 в 11:18
Саша Черных Саша Черных
4,306 14 14 золотых знаков 42 42 серебряных знака 93 93 бронзовых знака
Вы уверены? можно и без кавычек писать, это роли не играет, а чтобы фон не повторялся просто добавить нужно no-repeat
19 фев 2016 в 11:27
@soledar10, да, ибо таким образом лично разрешил проблему на своём сайте. Раньше нижняя часть его страниц выглядела на моём мониторе так: !1 !2 Если надо, могу html-страницы скинуть, проверьте на Screenfly с кавычками и без. Спасибо.
19 фев 2016 в 13:45
jsfiddle.net/soledar10/vLvrzh2x без разницы есть кавычки или нет
20 фев 2016 в 8:10
@soledar10, если изображение по ссылке, тоже не вижу изменений. Но если лежит в папке, похоже, кавычки приобретают значение: Отображение с кавычками / Отображение без кавычек / Код с кавычками / Код без кавычек / Спасибо.
20 фев 2016 в 12:51
Дело в том, что пробел не должен содержаться в адресе. Если он там есть, то помогает одно из следующих решений: 1. Честно заменить пробел на %20 . 2. Написать адрес в кавычках. 3. Экранировать пробел \ . В приведённых примерах фон с пробелом без кавычек вычёркивает всё css-свойство включая no-repeat center center fixed , однако, за счёт того, что у body есть устаревший атрибут background с той же картинкой, он всё же отображается. На самом деле, в нормальной ситуации фона в таком случае вообще не окажется.
1 мар 2016 в 16:14
Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.