Растяжение фона в html

22.08.2020
0
Главная › Растяжение › Растяжение фона в html
Растяжение фона в html thumbnail

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

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

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

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

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

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

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

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

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

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

sourse

Удивительный, простой и прогрессивный метод 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.

Используем строчный элемент <img>, размеры которого можно менять в любом браузере. Устанавливаем свойство 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;
}

@media 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.

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

<img src=»images/bg.jpg» id=»bg» alt=»»>
#bg {

        position:fixed;

        top:0;

        left:0;

        /* Сохраняем коэффициент пропорциональности */

        min-width:100%;

        min-height:100%;

}

Однако так изображение не центрируется. Поэтому обернем изображение в элемент <div>. Данный <div> будет иметь ширину в два раза больше окна браузера. Изображение, помещенное в него, будет сохранять пропорции и полностью покрывать окно браузера, размещаясь точно в центре.

<div id=»bg»>

        <img src=»images/bg.jpg» alt=»»>

</div>

#bg {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}

#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

Работает в:

  • Safari / Chrome / Firefox (не тестировалось на всех версиях, но в последних работает прекрасно).

  • IE 8+.

  • Opera (любая версия) и IE отказываются работать с данным способом (неправильное позиционирование изображения).

Читайте также:  Растяжения и разрывы связок это

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

Используем jQuery

Идея очень проста, если коэффициент пропорциональности изображения (строчный элемент <img> будет использоваться как фон) сопоставляется с коэффициентом пропорциональности окна браузера. Если для изображения он меньше, то нужно присвоить только свойству изображения width значение 100%, и оно будет заполнять экран и по высоте и по ширине. А если больше, то присвоить только свойству изображения height значение 100%.

<img src=»images/bg.jpg» id=»bg» alt=»»>
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
$(function() {  

        var theWindow        = $(window),
            $bg              = $(«#bg»),
            aspectRatio      = $bg.width() / $bg.height();

        function resizeBg() {

                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {

                    $bg
                        .removeClass()
                        .addClass(‘bgheight’);

                } else {

                    $bg
                        .removeClass()
                        .addClass(‘bgwidth’);
                }
        }

        theWindow.resize(function() {

                resizeBg();

        }).trigger(«resize»);

});

Работает в:

  • IE7+ (с заглушками, вероятно, будет работать и в IE6)

  • Во всех остальных браузерах.

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

Заключение

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

В качестве бонуса предлагается еще одна демонстрация работы с фоном при использовании таблицы.

Источник

Как растянуть фон на весь экран?
Вот так не работает:

<body background=»fon.jpg» width=»100″ height=»100″>

Картинка есть, но их несколько штук.

Max

2,15444 золотых знака1313 серебряных знаков3131 бронзовый знак

задан 3 мар ’16 в 15:13

  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа).

    – Nicolas Chabanovsky♦
    14 мар ’16 в 7:31

  • размеры width/height устанавливаются относительно родительского блока.

    – dasauser
    6 ноя ’18 в 10:35

html {
height: 100%;
box-sizing: border-box;
margin: 0;
background: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=1024&d=identicon&r=PG) center no-repeat;
background-size: 100% 100%;
}
html, body {
height: 100%;
box-sizing: border-box;
margin: 0;
}

body {
background: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=1024&d=identicon&r=PG) center no-repeat;
background-size: 100% 100%;
}

ответ дан 3 мар ’16 в 15:26

  • Спасибо огромное!!!! Но относится у меня к <body>.

    – Zero
    3 мар ’16 в 15:52

  • @Zero, можно и для body.

    – Qwertiy♦
    3 мар ’16 в 15:54

<body style=»background: url(‘img1.jpg’) no-repeat fixed; -webkit-background-size: cover; background-size: cover;»>

ответ дан 3 мар ’16 в 15:53

  • cover сохраняет пропорции.

    – Qwertiy♦
    3 мар ’16 в 15:55

  • cover — заполняет ввесь фон картинкой.

    – SkiesX
    3 мар ’16 в 15:58

  • Да. Но с сохранением пропорций. А то, что не поместится, просто исчезает. Растягивания картинки нет (хотя увеличение может быть) — я это имел в виду.

    – Qwertiy♦
    3 мар ’16 в 16:03

  • я понял Вас, просто дописал что он еще и заполняет фон, то есть как человеку нужно было на ввесь экран поставить фон.

    – SkiesX
    3 мар ’16 в 16:08

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

Источник

Изображения – важная часть привлекательного дизайна сайта. Фоновые изображения могут прибавить визуального интереса странице. 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 растянуть:

  1. Добавьте изображение для фона как первый элемент веб-страницы, и назначьте ему id равное «bg»:
  1. Расположите фоновое изображение так, чтобы оно было зафиксировано сверху и слева, было 100% в ширину и 100% в высоту.
    Добавьте приведенный ниже код в таблицу стилей:
img#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;}
  1. Поместите все содержимое страницы внутрь элемента DIV с id «content». Добавьте DIV под изображением:
All your content here — including headers, paragraphs, etc.

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

  1. Задайте содержимому относительное позиционирование и задайте 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;}
  1. После этого разместите содержимое на той же высоте, что и фоновое изображение. Не забудьте добавить для содержимого 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» , подготовленной дружной командой проекта Интернет-технологии.ру

Источник

Вопрос задан
3 года 9 месяцев назад

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

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

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

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

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

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

Без воспроизводимого примера в вопросе сложно предположить в чем именно проблема. Вам подойдет именно 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 {
background-position: bottom 10px right 40px;
background-size: 60px 120px;
background-repeat: no-repeat;
}
<div>
<span>no styles</span>
</div>
<div class=»bg_1″>
<span>
background-position: center;
</span>
</div>
<div class=»bg_2″>
<span>
background-size: cover;
</span>
</div>
<div class=»bg_3″>
<span>
background-size: contain;
</span>
</div>
<div class=»bg_4″>
<span>
background-size: cover;
<br>background-position: center;
</span>
</div>
<div class=»bg_5″>
<span>
background-size: contain;
<br>background-repeat: no-repeat;
<br>background-position: center;
</span>
</div>
<div class=»bg_6″>
<span>
background-position: bottom 10px right 40px;
<br>background-size: 60px 120px;
<br>background-repeat: no-repeat;
</span>
</div>

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

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

Попробуйте

background-size: cover;

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

.block {
margin: 5px;
width: 500px;
height: 200px;
border: 2px solid gray;
background: url(https://i.stack.imgur.com/qQoD4.jpg) no-repeat;
}

.block_one {
background-size: auto;
}

.block_two {
background-size: cover;
}

.block_three {
background-size: contain;
}
.block_for {
background-size: 100% 100%;
}
background-size: auto;
<div class=»block block_one»></div>
background-size: cover;
<div class=»block block_two»></div>
background-size: contain;
<div class=»block block_three»></div>
background-size: 100% 100%;
<div class=»block block_for»></div>

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

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

Источник

Предыдущая статья
Что делать при вывихе запястья руки
Следующая статья
Мазевые повязки от ожогов
© Блог доктора Ленского