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

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

Растянуть фоновую картинку на всю ширину окна браузера с помощью 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, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

• Как добавить картинку на веб-страницу?
• Как добавить иконку сайта в адресную строку браузера?
• Как добавить фоновый рисунок на веб-страницу?
• Как сделать обтекание картинки текстом?
• Как растянуть фон на всю ширину окна?
• Как выровнять фотографию по центру веб-страницы?
• Как разместить элементы списка горизонтально?
• Как убрать подчеркивание у ссылок?
• Как убрать маркеры в маркированном списке?
• Как изменить расстояние между строками текста?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как открыть ссылку в новом окне?

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

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

• Главная»
• Уроки»
• CSS учебник, бесплатные уроки CSS для начинающих

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.

• 

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 8 Июня 2017 Просмотров: 34594 Комментариев: 0

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 1 Июня 2017 Просмотров: 22756 Комментариев: 0

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 28 Мая 2017 Просмотров: 23107 Комментариев: 0

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Растянуть фон по вертикали и горизонтали на всю ширину блока CSS

В документации сказано, что background-size:cover растягивает изображение так, чтобы оно по высоте и(или) по ширине было растянуто по всему блоку, но картинка растягивается только по ширине (в качестве фона использую картинку 1200×700). Если сделать экран очень маленьким в ширину, то виден пробел между фоном и концом блока. Можно ли как-нибудь сделать так, чтобы фон пропорционально растягивался и по ширине и по высоте. Я предполагаю, что изображение должно увеличиваться, если ему не хватает расстояния до одной из сторон.

Отслеживать
simply good
задан 30 окт 2016 в 21:47
simply good simply good
566 1 1 золотой знак 6 6 серебряных знаков 20 20 бронзовых знаков
Там, наверное, вначале сообщения должно быть background-size: cover;
2 дек 2017 в 0:54
Проверьте reset css. Возможно проблема в обнулении отступов и рамки
14 апр 2021 в 11:12

5 ответов 5

Сортировка: Сброс на вариант по умолчанию

background-size: 100% 100%; 

Если же мы напишем вот так background-size: 100%; то это интерпритируется как background-size: 100% auto; то есть высота будет выравниваться пропорционально, а нам это не нужно, по этому нужно явно указать что высота должна быть не авто а 100% от высоты блока. Изи катка

Отслеживать
ответ дан 11 авг 2019 в 10:58
Алексей Соснин Алексей Соснин
475 1 1 золотой знак 5 5 серебряных знаков 9 9 бронзовых знаков

Без воспроизводимого примера в вопросе сложно предположить в чем именно проблема. Вам подойдет именно background-size: cover; , он возможно не срабатывает по нескольким причинам. Например, само изображение фона содержит белые полосы, откройте изображение и посмотрите есть ли они там. Например, возможно, изображение не отцентрировано. Например, возможно другие стили перекрывают ваши, посмотрите в инспекторе. Или возможно сам блок, на который вы добавляете фон не на всю высоту или ширину нужного блока. Вот небольшой наглядный пример с фонами, возможно вам поможет:

span < display: inline-block; padding: 6px; color: #2d5857; font-family: sans-serif; font-weight: 600; font-size: 20px; background: white; margin: 6px; >div < color: white; height: 100vh; background-image: url(https://i.stack.imgur.com/WXyZl.jpg); border: 6px solid yellow; margin-bottom: 6px; >.bg_1 < background-position: center; >.bg_2 < background-size: cover; >.bg_3 < background-size: contain; >.bg_4 < background-size: cover; background-position: center; >.bg_5 < background-size: contain; background-repeat: no-repeat; background-position: center; >.bg_6

 
no styles 
 
 background-position: center; 
 
 background-size: cover; 
 
 background-size: contain; 
 
 background-size: cover; 
background-position: center; 
 
 background-size: contain; 
background-repeat: no-repeat; 
background-position: center; 
 
 background-position: bottom 10px right 40px; 
background-size: 60px 120px; 
background-repeat: no-repeat; 

Как растянуть фон на всю высоту?

Хэй!
Использую шаблон от HTML5UP → html5up.net/uploads/demos/aerial
Убрал прокрутку и белые декали над фоном в CSS. Также сменил фон на картинку соотношением примерно 14:9(4288*2848). В оригинале же картинка достаточно широкая.
Появилась проблема на мобильных устройствах: картинка не заполняет свободное пространство и ужимается по ширине под ширину экрана.

Сообственно, вопрос: как сделать чтобы картинка расширялась и заполняла всю высоту?
Стоит заметить, что background-size: contain или background-size: cover — не работают ):

Код CSS отвечающий за фон:

• Вопрос задан более трёх лет назад
• 22961 просмотр

Комментировать

Решения вопроса 1

JavaScript Developer

background: #348cb2 url("images/bg.jpg") center; background-size: cover;

Ответ написан более трёх лет назад