Как background image растянуть, чтобы заполнить веб-страницу
Изображения – важная часть привлекательного дизайна сайта. Фоновые изображения могут прибавить визуального интереса странице. B ackground image HTML поможет получить тот визуальный дизайн, который вы ищете.
При работе с фоновыми изображениями вы столкнетесь с проблемой растягивания рисунка на всю страницу. Потому что не каждое изображение подходит сайту по размеру. Вместо того чтобы устанавливать фиксированный размер, растягивание изображения позволяет заполнить страницу. При этом неважно, насколько широкое или узкое окно браузера.
Лучший способ растянуть изображение — это использовать свойство CSS3 «background-size» . Вот пример, который использует фоновое изображение для body страницы, и устанавливает размер в » 100% «. Поэтому рисунок всегда растянется и заполнит весь экран.
body
Это свойство работает в 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» :
id="bg" />
Расположите фоновое изображение так, чтобы оно было зафиксировано сверху и слева, было 100% в ширину и 100% в высоту.
Добавьте приведенный ниже код в таблицу стилей:
img#bg
Поместите все содержимое страницы внутрь элемента DIV с id «content» . Добавьте DIV под изображением:
All your content here - including headers, paragraphs, etc.
Примечание : сейчас пришло время взглянуть на страницу. Изображение должно выглядеть растянутым, но содержимое пропало. Почему? Фоновое изображение 100% в высоту, а раздел содержимого располагается в потоке документа после изображения – большинство браузеров не отобразят его.
Задайте содержимому относительное позиционирование и задайте z-index , равный 1. Это поднимет его над фоновым изображением в браузерах. Добавьте приведенный ниже код в таблицу стилей:
#content
- Свойство HTML CSS background image в Internet Explorer 6 несовместимо с современными стандартами. Есть много способов спрятать CSS от любого браузера, кроме IE6 , но самое это использовать условные комментарии.
- Обязательно проверьте это в IE 7 и IE 8 . Возможно, понадобится откорректировать комментарии.
Немногим сайтам необходимо поддерживать IE 7 или 8 , а IE6 – еще меньше! Как таковой, этот подход устарел. Я оставляю это как любопытный пример того, насколько было трудно до того, как все браузеры стали работать сообща!
Имитация растянутого фонового изображения на меньшем пространстве
Можно применить похожую технику, чтобы имитировать растянутое фоновое изображение на HTML div background image или другом элементе веб-страницы. Это сложнее, так как нужно либо использовать абсолютное позиционирование.
- Разместите на странице изображение, которое будет использовано как фон.
- В таблице стилей установите ширину и высоту изображения. Заметьте, что можно подставить проценты, но мне легче использовать значения длины.
img#bg
- Поместите содержимое в div с id «content» , как мы делали раньше.
- Задайте div с содержимым ширину и высоту, соответствующую размерам фонового изображения:
div#content
После этого разместите содержимое на той же высоте, что и фоновое изображение. Не забудьте добавить для содержимого z-index , равный 1.
#content
Свойства background-size и background image HTML широко поддерживаются браузерами, и этот подход, скорее всего, можно расценивать как продукт прошедшей эпохи. Если вы захотите использовать такой подход, обязательно проверьте его в как можно большем количестве браузеров. И если содержимое поменяет размер, нужно будет изменить размеры контейнера и фонового изображения.
Растянуть фон по вертикали и горизонтали на всю ширину блока 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
Просмотров: 101094
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Фоновое изображение
Продолжим изучение CSS. В данном уроке css мы пройдем одну из важных тем — тему изучения работы с фоном через CSS. Это может быть фон всего документа (всей html-страницы) или фон какой нибудь таблицы то есть все, что связано с фоном через css мы сейчас и рассмотрим.
Для этого урока нам понадобится несколько изображений, которые мы будем применять в качестве фона. И первым делом мы займемся тем, что изучим как придается фон всему документу.
Как мы уже знаем — все содержимое документа находится в теге , соответственно, чтобы задать фон всему документу нам необходимо переопределить тег (задать ему фоновый цвет).
Фоновый цвет задается свойством background-color и прописываем значение цвета.
Фон всей html-страницы стал серым. Названия и код некоторых цветов можно видеть в таблице:
Название и код цвета
| Цвет | Название | Код цвета | Цвет | Название | Код цвета |
| Белый | white | ffffff | Розовый | fuchsia | ff00ff |
| Бирюзовый | agua | 00ffff | Светло-серый | silver | c0c0c0 |
| Голубой | teal | 008080 | Синий | blue | 0000ff |
| Желтый | yellow | ffff00 | Сиреневый | purple | 800080 |
| Зеленый | lime | 00ff00 | Темно-зеленый | green | 008000 |
| Красный | red | ff0000 | Темно-серый | gray | 808080 |
| Малиновый | maroon | 800000 | Темно-синий | havy | 000080 |
| Оливковый | olive | 808000 | Черный | black | 000000 |
Если же мы хотим сделать фон страницы текстурой нам надо применить свойство background-image — изображение на фон. После двоеточия указываем место, где лежит изображение которое будет фоном.
background-image:url( имя файла );
Если файл изображения находится в той же папке, что и таблица стилей, то в круглых скобках прописываем только имя файла, который мы выбрали для фона. И так же заметьте, что размер нашего фонового изображения может быть 100 ×100px, а замостить фоном мы можем всю страницу, какой бы большой она ни была.
Если, после установки фона, плохо виден текст страницы необходимо подкорректировать цвет текста.
Как же небольшим фоновым изображением заполняется вся страница документа? А происходит это благодаря свойству background-image . Оно сообщает браузеру, что этим изображением необходимо заполнить всю страницу документа.
Происходит это следующим образом: по умолчанию браузер начинает заполнять страницу изображением с левого верхнего угла и движется до правого края (заполняя первый верхний ряд).
Затем заполняет первый вертикальный ряд сверху до нижнего края. Затем второй горизонтальный ряд, далее второй вертикальный — и так пока не дойдет до правого нижнего угла. И все это, конечно, мгновенно.
Если рисунок однообразный (какая нибудь текстура), то разбиения фона на квадратики видно не будет. В противном случае — в фоне страницы будут заметны повторяющиеся изображения нашего файла.
Теперь давайте заполним фон картинкой не с текстурным изображением, а с каким нибудь конкретным рисунком. Файл берем небольших размеров.
background-image:url( имя файла 2 );
Фон нашей страницы — повторяющееся изображение нашей картинки.
Так же мы можем сами решать как нам разместить на странице наше фоновое изображение. В этом нам поможет свойство, отвечающее за тиражирование фонового изображения — background-repeat (повторение фона).
Значения, которые может принимать это свойство:
repeat-x — повторять фоновое изображение только по оси X
repeat-y — повторять фоновое изображение только по оси Y
no-repeat — вообще не повторять
Сделаем наше изображение по оси Y :
background-image:url( имя файла 2 );
Наше изображение повторяется только по оси Y (по левому краю страницы).
Мы так же можем выбрать точку, из которой браузер начнет тиражирование фонового изображения на странице. По умолчанию это происходит с левого верхнего угла.
Что бы браузер начал тиражирование изображения с верхнего правого угла применяем свойство background-position с указанием двух параметров: top — сверху, right — справа.
background-image:url( имя файла 2 );
Браузер замостил фоновым изображением только правый край страницы.
Теперь давайте уберем тиражирование фонового изображения, оставив один рисунок в правом верхнем углу страницы.
background-image:url( имя файла 2 );
У нас осталось одно изображение, которое расположено в правом верхнем углу страницы.
Рассмотрим еще одно свойство, используемое при работе с фоном. Если применить прокрутку страницы, мы заметим, что фоновое изображение закреплено на странице и движется при прокручивании.
Используя свойство background-attachment с параметром fixed наше фоновое изображение при прокручивании страницы будет оставаться на месте.
background-image:url( имя файла 2 );
background- attachment : fixed ;
Фоновое изображение теперь зафиксировано в правом верхнем углу браузера (не страницы).
Так же мы можем наше фоновое изображение разместить в любом месте, используя свойство background-position . В значении свойства прописываем в пикселях расстояние от левого края браузера до изображения и от верхнего края браузера до изображения.
background-image:url( имя файла 2 );
background- attachment : fixed ;
Если убрать свойство background- attachment : fixed ; , то фоновое изображение будет закреплено на странице (при прокручивании страницы будет перемещаться вместе со страницей).
Умение применять эти свойства, будет вам очень полезно при создании своих сайтов.
Некоторые пользователи отключают загрузку картинок в своем браузере для ускорения загрузки web-страниц. Если в качестве фона вы используете какое то изображение, то такие пользователи вместо картинки увидят белый фон. Так что выбор за вами, что применить в качестве фона страницы: картинку или фоновый цвет.