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

853

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

Я видел несколько вопросов о переполнении стека, которые выполняют эту работу, например, Stretch и масштабирование CSS-фона . Это хорошо работает, но я хочу разместить изображение с помощью background, а не с imgтегом.

В этом imgразмещается тег, а затем с помощью CSS мы отдаем дань imgтегу.

width:100%; height:100%;

Это работает, но этот вопрос немного устарел и утверждает, что в CSS 3 изменение размера фонового изображения будет работать довольно хорошо. Я попробовал этот пример первым , но у меня не получилось.

Есть ли хороший способ сделать это с background-imageобъявлением?

css  background 
— Фабио Антунес
источник
113
размер фона: 100% 100%;
— Андреас Л.
5
Может быть, эта демонстрация может быть полезна: w3schools.com/cssref/…
— Davide
1
— Алекс Ангас
@AlexAngas Разве возраст вопроса не должен быть фактором? Этот вопрос был задан 6 лет назад, а вопрос, который вы указали, был задан 4 года назад.
— Фабио Антунес
@ FábioAntunes ИМХО, мы бы не хотели закрывать вопрос с лучшими ответами, а вместо этого поощрять дубликаты для ссылки на него. Я уверен, что это обсуждалось на Meta, но я не могу найти это сейчас ...
— Алекс Ангас

Ответы:

1048

CSS3 имеет приятный маленький атрибут с именем background-size:cover.

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

— Вашиштха Йоги
источник
11
Cover обрезает изображение, если соотношение сторон не совпадает, поэтому это не очень хорошее общее решение.
— mahemoff
1
если вы хотите, чтобы он работал в браузерах IE - github.com/louisremi/background-size-polyfill
— Wreeecks
4
Кажется, он не работает на Firefox. Тем background-size: 100vw 100vh;не менее, делает трюк приятно.
— Янник Морей
5
@YannickMauray try: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
— Амит Кумар Кхаре
2
Если вы хотите это, но только для горизонтальной оси, используйте это: background-size: 100% auto; stackoverflow.com/questions/41025630/…
— antoineMoPa
470

Вы можете использовать свойство CSS3, чтобы сделать это довольно хорошо. Это изменяет размер, чтобы не искажать изображение (хотя это действительно масштабирует маленькие изображения). Просто обратите внимание, это еще не реализовано во всех браузерах.

background-size: 100%;
— Мэтт Берджесс
источник
19
@nXqd Это полный код! Создайте контейнер с background-imageи включите свойство выше. Как уже упоминалось, поддержка браузера еще не очень хорошая, и существуют версии для этого браузера, т.е. -webkit-background-sizeи т. д. См. модуль W3C CSS3: background-size и css3.info: background-size
— MrWhite
15
Чтобы сохранить соотношение сторон изображения, вы должны использовать "background-size: cover;" или "фоновый размер: содержать;" Я создал полифилл, который реализует эти значения в IE8: github.com/louisremi/background-size-polyfill
— Луи-Реми,
4
Также желательно добавить, autoчтобы сохранить соотношение сторон.
— Chibueze Opata
186

Используя код, который я упомянул ...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

Это дает желаемый эффект: прокручивается только контент, а не фон.

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

С CSS 3 кажется, что это будет намного проще.

— Фабио Антунес
источник
12
Но это не фоновое изображение. Вы можете сделать это только для блока, но не для встроенного элемента, такого как input [type = text]. Или я не прав?
— Дирчао
11
нет необходимости в class = "stretch", просто используйте #background img {} в качестве идентификатора в css
— BerggreenDK
z-индекс: -1; держит ваше изображение на заднем плане. Если вы хотите показать свое изображение на переднем плане, вы можете либо увеличить значение z-index, либо удалить этот индекс.
— Гоханаккурт
У меня проблема с IE8. Фоновое изображение DIV растягивается полностью, но в IE8 изображения выходят за пределы DIV, поэтому не могут видеть полное изображение. Это обрезается. Вот мой вопрос: stackoverflow.com/questions/22331179/…
— Si8
1
Очевидная ошибка, которую делают люди, - поместить фоновое изображение в css (т.е. с помощью background : url("example.png");), а затем использовать атрибут css background-size:100%;под ним, чтобы, надеюсь, масштабировать изображение до ширины экрана. Это не будет работать, не так ли? Если вы хотите поместить фоновое изображение для тела, то к тегу body следует добавить атрибут изображения <body background="example.png">. Затем используйте CSS background-size:100%;для масштабирования.
— sjsam
166

CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}
— Джош Крозье
источник
Тем не менее, это не работает в IE8. Это создает поле сверху и снизу окна.
— erdomester
На Android это работало при использовании html, body {...}вместо body {...}.
— Эдвард
53 
background-size: 100% 100%;

растягивает фон, чтобы заполнить весь элемент на обеих осях.

— yeahdixon
источник
40

Следующая часть CSS должна растягивать изображение во всех браузерах.

Я делаю это динамически для каждой страницы. Поэтому я использую PHP для генерации собственного HTML-тега для каждой страницы. Все изображения находятся в папке «image» и заканчиваются на «Bg.jpg».

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

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

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

Это было протестировано с Internet Explorer 9, Chrome 21 и Firefox 14.

— Торстен Нихуес
источник
2
Ваш пример не работает в смысле обратной совместимости, потому что вы просто забыли о ведущих префиксах «-» вендора. Должно быть -webkit-background-size, -moz-background-sizeи так далее. См. Developer.mozilla.org/en-US/docs/CSS/… Или вы хотите включить его в будущее как стенографическое свойство, например,background: url(img/bg-home.jpg) no-repeat center center / cover fixed;
— Volker E.
Это было единственное решение, которое будет работать для меня на IE9. Спасибо.
— Робник
17

Фактически вы можете добиться того же эффекта, что и фоновое изображение, с помощью тега img. Вам просто нужно установить его z-index ниже, чем все остальное, установить position: absolute и использовать прозрачный фон для каждого поля на переднем плане.

— Ким Стебель
источник
Вот что я видел в других ТАКИХ вопросах и работает, но после выхода CSS3 я подумал, что теперь это лучший способ сделать это.
— Фабио Антунес
3
Возможно, и, принимая во внимание изменения в использовании браузеров, вы сможете использовать их в коммерческих целях всего за 10 лет?
— Ким Стебель
Будучи CSS3, нет ничего плохого в использовании свойства, которое видят большинство современных браузеров, и в предоставлении минимального стандарта неподдерживаемым браузерам. Здесь, например, вы можете использовать скучный, но приемлемый плиточный фон для <IE8 и прекрасную картинку для Firefox / Chrome / Safari / Opera. Кроме того, есть много полизаполнений для репликации функциональности CSS3 в старых браузерах с JavaScript. Другими словами, вам не нужно ждать, пока каждый браузер поддержит CSS3, чтобы использовать его.
— Дэн Блоу
Только что нашел этот другой пост, который ссылается на использование проприетарного MS AlphaImageLoader: stackoverflow.com/questions/2991623/…
— uglymunky
17

Используйте этот CSS:

background: url('img.png') no-repeat; 
background-size: 100%;
— RSH1
источник
15

Это объясняется хитростями CSS: идеальное фоновое изображение полной страницы

Демонстрация: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

Код:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
— Аамер Шахзад
источник
Исходя из вышеизложенного ответа, я видел, что фоновое исправление не работает на мобильных устройствах и Microsoft Edge. Идеальное решение , чтобы сделать фон растягивать и исправить на всех устройствах и браузерах я рекомендую jquery-backstretch.com
— Aamer Шахзад
15

Вы можете добавить этот класс в свой файл CSS.

.stretch {
    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 или более поздняя версия
  • Хром Все или позже
  • Internet Explorer 9 или более поздняя версия
  • Opera 10 или более поздняя версия (поддерживается Opera 9.5 background-size, но не ключевые слова)
  • Firefox 3.6 или более поздней версии (Firefox 4 поддерживает версию с префиксом не от поставщика)
— Арунрай С
источник
Это рабочий ответ "растянуть, чтобы соответствовать". Примечание: соотношение сторон изменится.
— devdrc
10

Чтобы масштабировать изображения соответствующим образом в зависимости от размера контейнера, используйте следующее:

background-size: contain;
background-repeat: no-repeat;
— justinpees
источник
9

Я использую это, и это работает со всеми браузерами:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>
— Махди Джокар
источник
9

Спасибо!

Но тогда она не работает для Google Chrome и Safari браузеры (растяжение работали, но высота картин было всего 2 мм!) , Пока кто - то сказал мне , что не хватает:

Попробуйте установить height:auto;min-height:100%;

Так что измените это для вашей height:100%;строки, дает:

#### #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

Непосредственно перед этим новым добавленным кодом у меня есть это в моих темах Drupal Tendustyle.css :

html, body {height: 100%;}

#page {фон: #ffffff; высота: авто! важно; высота: 100%; минимальная высота: 100%; положение: относительное;}

Затем я должен сделать новый блок в Drupal с изображением, добавив class=stretch:

<img alt = "" class = "stretch" src = "pic.url" />

Простое копирование картинки с редактором в этот блок Drupal не работает; нужно изменить редактор на неформатированный текст.

— Cybr
источник
8

Я согласен с изображением в абсолютном div с 100% шириной и высотой. Убедитесь, что вы установили 100% ширину и высоту для тела в CSS и установите поля и отступы на ноль. Другая проблема, с которой вы столкнетесь при использовании этого метода, заключается в том, что при выделении текста область выделения может иногда охватывать фоновое изображение, что приводит к нежелательному эффекту превращения полной страницы в выбранное состояние. Вы можете обойти это, используя user-select:noneправило CSS, например, так:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

Опять же, Internet Explorer здесь плохой парень, потому что он не распознает опцию выбора пользователя - даже предварительный просмотр Internet Explorer 10 не поддерживает его, поэтому у вас есть возможность использовать JavaScript для предотвращения выбора фонового изображения (например, http : //www.felgall.com/jstip35.htm ) или используя метод растягивания фона CSS 3 .

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

— Майк Блэк
источник
тогда не используйте img просто div с bg, это не должно быть выбрано
— Jacek Pietal
7

Я хотел центрировать и масштабировать фоновое изображение, не растягивая его на всю страницу, и я хотел сохранить соотношение сторон. Это сработало для меня, благодаря вариантам, предложенным в других ответах:

ВНУТРЕННЕЕ ИЗОБРАЖЕНИЕ: ------------------------

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}
— AnnieDee
источник
5

Я использовал комбинацию CSS-свойств background-X, чтобы добиться идеального масштабирования фонового изображения.

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

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

— Райан Ден-Каат
источник
4

Используйте плагин Backstretch . Можно даже сделать несколько слайдов изображений. Это также работает в контейнерах. Таким образом, например, можно было бы покрыть только часть фона фоновым изображением.

Поскольку даже я смог заставить его работать, это доказывает, что это простой в использовании плагин :).

— Даниил
источник
3

Если вы хотите, чтобы содержимое было центрировано горизонтально, используйте комбинацию, подобную этой:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

Это будет выглядеть красиво.

— Самуэль Рамзан
источник
2

Используйте этот CSS:

background-size: 100% 100%

— Shady Sherif
источник
Downwoted, это дубликат предыдущего ответа stackoverflow.com/a/35021247/3810453
— Zanshin13
1
@ Zanshin13 Я не знал о предыдущем вопросе. Тогда вам придется голосовать за закрытие вопроса, а не понижать мой ответ!
— Shady
1

Вы можете использовать border-image : yourimageсвойство, чтобы масштабировать изображение до границы. Даже если вы дадите фоновое изображение, поверх него будет нарисовано изображение границы.

Это border-imageсвойство очень полезно, если ваша таблица стилей реализована где-то, что не поддерживает CSS 3. Если вы используете Google Chrome или Firefox, то я рекомендую само background-size:coverсвойство.

— Натеш бхат
источник
0

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

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

— MarioRicalde
источник
Хорошая точка зрения. Но я использую jpg для фонового изображения, она составляет около 1500x1000, занимает чуть более 100 КБ. Но как ты это сделал?
— Фабио Антунес
1
Как насчет центрирования изображения по горизонтали и смягчения краев изображения сплошным цветом или рисунком? Это позволит вам иметь плавную адаптацию, если у пользователя больше, чем разрешение изображения.
— MarioRicalde
Но я хочу, чтобы изображение заполняло фон. То, что вы говорите, это то, что я обычно делаю.
— Фабио Антунес
0

Следующее сработало для меня.

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

который работал, чтобы покрыть весь фон в разных измерениях

— tony2tones
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.