Как растянуть фон на всю ширину окна?
Растянуть фоновую картинку на всю ширину окна браузера с помощью 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, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как растянуть фон на всю высоту?
Хэй!
Использую шаблон от HTML5UP → html5up.net/uploads/demos/aerial
Убрал прокрутку и белые декали над фоном в CSS. Также сменил фон на картинку соотношением примерно 14:9(4288*2848). В оригинале же картинка достаточно широкая.
Появилась проблема на мобильных устройствах: картинка не заполняет свободное пространство и ужимается по ширине под ширину экрана.
Сообственно, вопрос: как сделать чтобы картинка расширялась и заполняла всю высоту?
Стоит заметить, что background-size: contain или background-size: cover — не работают ):
Код CSS отвечающий за фон:
- Вопрос задан более трёх лет назад
- 22752 просмотра
Комментировать
Решения вопроса 1
JavaScript Developer
background: #348cb2 url("images/bg.jpg") center; background-size: cover;Ответ написан более трёх лет назад
Растянуть фон по вертикали и горизонтали на всю ширину блока 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
Алексей Соснин Алексей Соснин
465 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; Фон на всю страницу с помощью CSS
В сегодняшнем уроке Вы узнаете 2 техники по созданию фона на всю страницу.
Наш фон будет:
— заполнять полностью страницу (без белых полос)
— правильно масштабироваться
— соблюдать пропорции изображения
— центрирован на странице
— не содержать скроллов
— кроссбраузерным
Техника №1 + все файлы
Этого всего достичь очень трудно, поэтому нам придется немного попотеть и использовать множество разных техник для этого. Прежде всего, нам необходимо правильное масштабирование изображения. Традиционное background-image нам тут не поможет, и поэтому мы будем использовать инлайновое изображение.
Техника №1
Это изображение будет помещено на страницу в множество разных слоев. Каждый слой (блок) будет выполнять свою роль.
* margin: 0;
padding: 0;
>
html, body, #bg, #bg table, #bg td height:100%;
width:100%;
overflow:hidden;
>
#bg div height:200%;
left:-50%;
position:absolute;
top:-50%;
width:200%;
>
#bg td text-align:center;
vertical-align:middle;
>
#bg img margin:0 auto;
min-height:50%;
min-width:50%;
>Получилось довольно много кода, но в конце мы получили хороший результат. После этого у нас будет идеальный фон, но нам же еще необходимо размещать контент на странице. Для этого нам понадобится еще один контейнер. Он будет находиться над фоном, иметь ширину и высоту на весь экран, и overflow auto (скроллы могут появиться). Внутри этого контейнера мы можем размещать контент.
#cont position:absolute;
top:0;left:0;
z-index:70;
overflow:auto;
>
.box margin: 0 auto;
width: 400px;
padding: 50px;
background: white;
padding-bottom:100px;
font: 14px/2.2 Georgia, Serif;
>JavaScript Фиксы
В Файрфоксе «фокус», по умолчанию, направлен на элемент body при загрузке страницы. Это означает, что при нажатии на пробел страница опустится до body, и у нас появятся белые полосы. Чтобы это исправить, нам понадобится небольшой jQuery фикс. Он уберет «фокус» с элемента body и направит его на другой спрятанный элемент.
$(function()$(".box").prepend('');
$("#focus-stealer").focus();
>);Техника №2
В данном примере мы будем использовать CSS без каких-либо фиксов. Нам понадобится только инлайновое изображение с классом “bg”. Больше никакой другой разметки. Это большой плюс по сравнению с первой техникой.
Однако, данная техника не выполняет все требования, которые мы прописали в самом начале. Этот фон не будет центрирован в IE 7, не будет вообще работать в IE 6, и может иногда неправильно масштабироваться. Но все же это неплохой вариант.
img.bg min-height: 100%;
min-width: 1024px;
/* Масштабирование*/
width: 100%;
height: auto;
/* Позиционирование */
position: fixed;
top: 0;
left: 0;
>
@media screen and (max-width: 1024px) img.bg left: 50%;
margin-left: -512px; >
>
div#content
/* Контент над фоном */
position: relative;
width: 500px;
margin: 0 auto;
background: #fff;
padding: 20px;
font-family: helvetica, arial, sans-serif;
font-size: 10pt;
line-height: 16pt;
-moz-box-shadow: #000 4px 4px 10px;
-webkit-box-shadow: #000 4px 4px 10px;
>
body
margin: 0;
padding: 20px 0 0 0;
>Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.css-tricks.com
Перевел: Максим Шкурупий
Урок создан: 24 Сентября 2009
Просмотров: 101099
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.