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

Вопрос задан 4 года 8 месяцев назад

Просмотрен 21k раз

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

Если сделать экран очень маленьким в ширину, то виден пробел между фоном и концом блока.

Можно ли как-нибудь сделать так, чтобы фон пропорционально растягивался и по ширине и по высоте.

Я предполагаю, что изображение должно увеличиваться, если ему не хватает расстояния до одной из сторон.

задан 30 окт ’16 в 21:47

simply goodsimply good

54611 золотой знак55 серебряных знаков1717 бронзовых знаков

2

Без воспроизводимого примера в вопросе сложно предположить в чем именно проблема. Вам подойдет именно 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-: 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 { background-position: 10px right 40px; background-size: 60px 120px; background-repeat: no-repeat; }

no styles background-position: center; background-size: cover; background-size: contain;

ответ дан 18 сен ’18 в 8:13

kizosokizoso

9,18833 золотых знака2424 серебряных знака5353 бронзовых знака

background-size: 100% 100%;

Очевидно же, первое число по ширине, второе по высоте: https://developer.mozilla.org/ru/docs/Web/CSS/background-size

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

ответ дан 11 авг ’19 в 10:58

Используйте contain для свойства background-size:

background-size: contain;

ответ дан 31 окт ’16 в 6:38

MiklMikl

3,30477 серебряных знаков1414 бронзовых знаков

5

Попробуйте

background-size: cover;

ответ дан 27 мар ’18 в 19:23

1

ответ дан 13 янв ’20 в 21:21

Sevastopol’Sevastopol’

29k1212 золотых знаков5959 серебряных знаков121121 бронзовый знак

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Как background image растянуть, чтобы заполнить веб-страницу

Изображения — важная часть привлекательного дизайна сайта. Фоновые изображения могут прибавить визуального интереса странице. Background image HTML поможет получить тот визуальный дизайн, который вы ищете.

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

Лучший способ растянуть изображение — это использовать свойство CSS3 «background-size». Вот пример, который использует фоновое изображение для body страницы, и устанавливает размер в «100%«. Поэтому рисунок всегда растянется и заполнит весь экран.

body { background: url(bgimage.jpg) no-repeat; background-size: 100%; }

Это свойство работает в IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ и во всех популярных мобильных браузерах.

Имитация растянутого фона в устаревших браузерах

Маловероятно, что понадобится обеспечивать поддержку HTML body background image браузерам старше IE9. Но предположим, что вас беспокоит, будет ли сайт корректно отображаться в IE8. В этом случае нужно имитировать растянутый фон. Можно использовать префиксы браузеров для Firefox 3.6 (-moz-background-size) и Opera 10.0 (-o-background-size).

Самый легкий способ имитировать растянутое фоновое изображение — это растянуть его по всей странице. Тогда не останется лишнего пространства, и не нужно будет волноваться, что текст не поместится в растянутую область. Вот как можно HTML background image растянуть:

Добавьте изображение для фона как первый элемент веб-страницы, и назначьте ему id равное «bg»:

Расположите фоновое изображение так, чтобы оно было зафиксировано сверху и слева, было 100% в ширину и 100% в высоту.

Добавьте приведенный ниже код в таблицу стилей:

img#bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%;}

Поместите все содержимое страницы внутрь элемента DIV с id «content». Добавьте DIV под изображением:

All your content here — including ers, paragraphs, etc.

Примечание: сейчас пришло время взглянуть на страницу. Изображение должно выглядеть растянутым, но содержимое пропало. Почему? Фоновое изображение 100% в высоту, а раздел содержимого располагается в потоке документа после изображения — большинство браузеров не отобразят его.

Задайте содержимому относительное позиционирование и задайте z-index, равный 1. Это поднимет его над фоновым изображением в браузерах. Добавьте приведенный ниже код в таблицу стилей:

#content { position: relative; z-index: 1;}

1. Свойство HTML CSS background image в Internet Explorer 6 несовместимо с современными стандартами. Есть много способов спрятать CSS от любого браузера, кроме IE6, но самое это использовать условные комментарии.
2. Обязательно проверьте это в IE 7 и IE 8. Возможно, понадобится откорректировать комментарии.

Немногим сайтам необходимо поддерживать IE 7 или 8, а IE6 — еще меньше! Как таковой, этот подход устарел. Я оставляю это как любопытный пример того, насколько было трудно до того, как все браузеры стали работать сообща!

Имитация растянутого фонового изображения на меньшем пространстве

Можно применить похожую технику, чтобы имитировать растянутое фоновое изображение на HTML div background image или другом элементе веб-страницы. Это сложнее, так как нужно либо использовать абсолютное позиционирование.

1. Разместите на странице изображение, которое будет использовано как фон.
2. В таблице стилей установите ширину и высоту изображения. Заметьте, что можно подставить проценты, но мне легче использовать значения длины.

img#bg { width: 20em; height: 30em;}

1. Поместите содержимое в div с id «content», как мы делали раньше.
2. Задайте div с содержимым ширину и высоту, соответствующую размерам фонового изображения:

div#content { width: 20em; height: 30em;}

После этого разместите содержимое на той же высоте, что и фоновое изображение. Не забудьте добавить для содержимого z-index, равный 1.

#content { position: relative; top: -30em; z-index: 1; width: 20em; height: 30em;}

Свойства background-size и background image HTML широко поддерживаются браузерами, и этот подход, скорее всего, можно расценивать как продукт прошедшей эпохи. Если вы захотите использовать такой подход, обязательно проверьте его в как можно большем количестве браузеров. И если содержимое поменяет размер, нужно будет изменить размеры контейнера и фонового изображения.

Дайте знать, что вы думаете по данной теме в комментариях. За комментарии, отклики, подписки, дизлайки, лайки низкий вам поклон!

Данная публикация является переводом статьи «How to Stretch a Background Image to Fit a Web Page» , подготовленная редакцией проекта.

Фон, который всегда растягивается на всю страницу

Цель данного урока рассмотреть способы организации фонового изображения для веб сайта, которое будет всегда растягиваться на все окно браузера.

Подобный урок уже приводился на сайте RUSELLER.COM. Но с того момента прошло время и наступила пора обновить и расширить список используемых методов.

Вот требования к решению:

• Заполнять изображением всю страницу без пробелов.

• Масштабировать изображение, если нужно.

• Сохранять пропорции изображения.

• Изображение центрируется на странице.

• Изображение не создает никаких полос прокрутки.

• Кросс-браузерное решение по возможности.

• Не использовать никаких сторонних технологий, например, Flash.

Удивительный, простой и прогрессивный метод CSS3

Задача легко решается с помощью CSS3 благодаря ставшему доступным свойству background-size. Мы используем элемент html (лучше, чем body, так как он всегда имеет, по крайней мере, высоту окна браузера). Устанавливаем фиксированные и центрированный фон для него, а затем настраиваем размер с помощью присваивания свойству background-size ключевого слова cover.

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Работает в:

• Safari 3+

• Chrome

• IE 9+

• Opera 10+ (Opera 9.5 поддерживает свойство background-size, но без ключевых слов)

• Firefox 3.6+

Смотрим демонстрацию использования CSS3.

Техника с использованием только CSS. Часть #1.

Используем строчный элемент , размеры которого можно менять в любом браузере. Устанавливаем свойство min-height, чтобы заполнить окно браузера вертикально, а свойству width присваиваем значение 100% для заполнения по горизонтали. Также устанавливаем свойство min-width равным ширине изображения, чтобы никогда оно не уменьшалось.

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

Вот код CSS:

img.bg { /* Устанавливаем правила для заполнения фоном */ min-height: 100%; min-width: 1024px; /* Устанавливаем коэффициент пропорциональности */ width: 100%; height: auto; /* Устанавливаем позиционирование */ position: fixed; top: 0; left: 0; } @ screen and (max-width: 1024px) { /* Определяется свое для каждого конкретного изображения */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }

Работает в:

• Любой версии нормального браузера: Safari / Chrome / Opera / Firefox.

• IE 6: Не работает — но можно использовать какой-нибудь из трюков для позиционирования.

• IE 7/8: В большинстве случаев работает, не центрирует маленькие изображения, но заполняет экран правильно.

• IE 9: Работает.

Смотрим демонстрацию использования CSS. Часть 1.

Техника с использованием только CSS. Часть #2.

Другой способ решить задачу — поместить строчный элемент на странице, зафиксировать его положение в левом верхнем углу и установить значение 100% для его свойств min-width и min-height, сохраняя коэффициент пропорциональности.