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

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

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

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

width:100%; height:100%;

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

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

19.07.2009 15:51:52
размер фона: 100% 100%;
Andreas L. 30.08.2014 11:41:08
Может быть, эта демонстрация может быть полезна: w3schools.com/cssref/…
Davide 7.01.2015 18:48:04
@AlexAngas Разве возраст вопроса не должен быть фактором? Этот вопрос был задан 6 лет назад, а вопрос, который вы указали, был задан 4 года назад.
Fábio Antunes 1.03.2016 02:47:05
@ FábioAntunes ИМХО, мы бы не хотели закрывать вопрос с лучшими ответами, а вместо этого поощрять дубликаты для ссылки на него. Я уверен, что это обсуждалось на Meta, но я не могу найти это сейчас ...
Alex Angas 1.03.2016 02:54:17
22 ОТВЕТА
РЕШЕНИЕ

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

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

1041
3.08.2019 15:05:49
Cover обрезает изображение, если соотношение сторон не совпадает, поэтому это не очень хорошее общее решение.
mahemoff 21.06.2013 14:47:54
если вы хотите, чтобы он работал в браузерах IE - github.com/louisremi/background-size-polyfill
Wreeecks 26.08.2014 02:20:49
Кажется, он не работает на Firefox. Тем background-size: 100vw 100vh;не менее, делает трюк приятно.
Yannick Mauray 28.01.2018 10:02:32
@YannickMauray try: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
Amit Kumar Khare 13.02.2018 13:05:17
Если вы хотите это, но только для горизонтальной оси, используйте это: background-size: 100% auto; stackoverflow.com/questions/41025630/…
antoineMoPa 19.04.2018 17:42:00

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

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

0
30.09.2012 15:51:34
Хорошая точка зрения. Но я использую jpg для фонового изображения, она составляет около 1500x1000, занимает чуть более 100 КБ. Но как ты это сделал?
Fábio Antunes 19.07.2009 16:13:07
Как насчет центрирования изображения по горизонтали и смягчения краев изображения сплошным цветом или рисунком? Это позволит вам иметь плавную адаптацию, если у пользователя больше разрешения изображения.
MarioRicalde 19.07.2009 16:28:38
Но я хочу, чтобы изображение заполняло фон. То, что вы говорите, это то, что я обычно делаю.
Fábio Antunes 19.07.2009 19:05:27

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

17
19.07.2009 17:14:39
Вот что я видел в других ТАКИХ вопросах и работает, но после выхода CSS3 я подумал, что теперь это лучший способ сделать это.
Fábio Antunes 19.07.2009 19:07:20
Могут быть и, принимая во внимание изменения в использовании браузера, вы сможете использовать их в коммерческих целях всего за ... 10 лет?
Kim Stebel 20.07.2009 03:48:24
Будучи CSS3, нет ничего плохого в использовании свойства, которое видят большинство современных браузеров, и в предоставлении минимального стандарта неподдерживаемым браузерам. Здесь, например, вы можете использовать скучный, но приемлемый плиточный фон для <IE8 и прекрасную картинку для Firefox / Chrome / Safari / Opera. Кроме того, существует множество полизаполнений для репликации функциональности CSS3 в старых браузерах с JavaScript. Другими словами, вам не нужно ждать, пока каждый браузер поддержит CSS3, чтобы использовать его.
Dan Blows 10.05.2011 02:06:39
Только что нашел этот другой пост, который ссылается на использование проприетарного MS AlphaImageLoader: stackoverflow.com/questions/2991623/…
uglymunky 28.09.2011 19:31:25

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

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 кажется, что это будет намного проще.

186
23.05.2017 12:26:37
Но это не фоновое изображение. Вы можете сделать это только для блока, но не для встроенного элемента, такого как input [type = text]. Или я не прав?
deerchao 7.12.2011 07:09:26
нет необходимости в class = "stretch", просто используйте #background img {} в качестве идентификатора в css
BerggreenDK 24.08.2012 08:04:19
z-индекс: -1; держит ваше изображение на заднем плане. Если вы хотите показать свое изображение на переднем плане, вы можете либо увеличить значение z-index, либо удалить этот индекс.
gokhanakkurt 7.10.2013 16:09:04
У меня проблема с IE8. Фоновое изображение DIV растягивается полностью, но в IE8 изображения выходят за пределы DIV, поэтому не могут видеть полное изображение. Это обрезается. Вот мой вопрос: stackoverflow.com/questions/22331179/…
Si8 11.03.2014 17:25:42
Очевидная ошибка, которую делают люди, - поместить фоновое изображение в css (т.е. с помощью background : url("example.png");), а затем использовать атрибут css background-size:100%;под ним, чтобы, надеюсь, масштабировать изображение до ширины экрана. Это не будет работать, не так ли? Если вы хотите поместить фоновое изображение для тела, то к тегу body должен быть добавлен атрибут изображения <body background="example.png">. Затем используйте CSS background-size:100%;для масштабирования.
sjsam 7.01.2015 08:52:52

Спасибо!

Но тогда она не работает для 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 не работает; нужно изменить редактор на неформатированный текст.

9
22.09.2013 12:09:52

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

INLINE IMAGE: ------------------------

<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%;
}
7
22.09.2013 12:09:19

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

background-size: 100%;
470
28.02.2011 00:44:54
@nXqd Это полный код! Создайте контейнер с background-imageи включите свойство выше. Как уже упоминалось, поддержка браузера еще не очень хорошая, и существуют версии для этого браузера, т.е. -webkit-background-sizeи т. д. См. модуль W3C CSS3: background-size и css3.info: background-size
MrWhite 20.06.2011 07:28:54
Чтобы сохранить соотношение сторон изображения, вы должны использовать "background-size: cover;" или "фоновый размер: содержать;" Я создал полифилл, который реализует эти значения в IE8: github.com/louisremi/background-size-polyfill
Louis-Rémi 5.12.2012 09:56:18
Также желательно добавить, autoчтобы сохранить соотношение сторон.
Chibueze Opata 9.12.2012 12:53:01

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

background: url('img.png') no-repeat; 
background-size: 100%;
17
9.05.2011 09:41:32

Я согласен с изображением в абсолютном 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 я бы поместил фоновое изображение внизу страницы, но если фоновое изображение загружается слишком долго (то есть изначально с белым фоном), вы можете перейти к верхней части страницы.

8
23.07.2014 15:54:19
тогда не используйте img просто div с bg, его не нужно выбирать
Jacek Pietal 18.10.2013 15:04:29

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*/
}
165
16.10.2013 00:18:10
Тем не менее, это не работает в IE8. Это создает поле сверху и снизу окна.
erdomester 16.02.2014 12:39:48
На Android это работало при использовании html, body {...}вместо body {...}.
Edward 7.03.2016 12:56:52

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

<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
30.09.2012 15:55:07

Следующая часть 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.

40
18.11.2014 17:17:51
Ваш пример не работает в смысле обратной совместимости, потому что вы просто забыли о ведущих префиксах «-» вендора. Должно быть -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. 8.05.2013 04:26:48
Это было единственное решение, которое будет работать для меня на IE9. Спасибо.
robnick 17.06.2014 00:23:51

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

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

4
22.09.2013 12:15:46

Вы можете добавить этот класс в свой файл 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 поддерживает версию с префиксом не от поставщика)
15
3.08.2019 15:18:38
Это рабочий ответ "растянуть, чтобы соответствовать". Примечание: соотношение сторон изменится.
devdrc 17.09.2017 19:27:11
background-size: 100% 100%; 

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

53
3.08.2019 15:16:40

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

background-size: contain;
background-repeat: no-repeat;
10
22.08.2019 11:52:58

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

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

1
3.08.2019 15:12:50

Это объясняется хитростями 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;
}
15
3.08.2019 15:10:06
Исходя из вышеприведенного ответа, я видел, что фоновое исправление не работает на мобильных устройствах и Microsoft Edge. Идеальное решение , чтобы сделать фон растягивать и исправить на всех устройствах и браузерах я рекомендую jquery-backstretch.com
Aamer Shahzad 2.11.2018 08:47:17

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

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

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

5
3.08.2019 15:08:14

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

background-size: 100% 100%

2
19.11.2018 12:29:40
Забитый, это дубликат предыдущего ответа stackoverflow.com/a/35021247/3810453
Zanshin13 17.04.2019 16:01:38
@ Zanshin13 Я не знал о предыдущем вопросе. Тогда вам придется голосовать за закрытие вопроса, а не понижать мой ответ!
Shady Sherif 20.04.2019 11:51:36

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

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

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

3
3.08.2019 15:07:14

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

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

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

0
25.03.2020 21:07:47