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

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

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

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

width:100%; height:100%;

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

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

+774
19 июл. '09 в 15:51
источник поделиться
21 ответ

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

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

+951
10 сент. '11 в 14:28
источник

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

background-size: 100%;
+455
28 февр. '11 в 0:44
источник

Используя код, я упомянул...

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

+183
30 июл. '09 в 18:21
источник

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*/
}
+162
23 мар. '12 в 19:58
источник
background-size: 100% 100%; 

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

+45
26 янв. '16 в 18:34
источник

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

Я делаю это динамически для каждой страницы. Поэтому я использую PHP для создания собственного тега HTML для каждой страницы. Все изображения находятся в папке "образ" и заканчиваются на "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, удалить escape-косые черты, настроить пути и поместить этот код в свой файл 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.

+39
06 авг. '12 в 13:41
источник

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

+17
19 июл. '09 в 17:14
источник

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

background: url('img.png') no-repeat; 
background-size: 100%;
+17
09 мая '11 в 9:41
источник

Вы можете добавить этот класс в свой 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 или более поздняя версия
  • Chrome Что бы то ни было или позже
  • Internet Explorer 9 или новее
  • Opera 10 или новее (поддерживается Opera 9.5 background-size, но не ключевые слова)
  • Firefox 3.6 или новее (Firefox 4 поддерживает версию, отличную от поставщика).
+14
17 апр. '15 в 7:57
источник

Объяснение css-трюками https://css-tricks.com/perfect-full-page-background-image/

demo: 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;
}
+13
28 июл. '17 в 6:29
источник

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

{
background-size:contain;
background-repeat: no-repeat;
}
+10
07 янв. '17 в 18: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
02 мая '12 в 14:39
источник

Спасибо!

Но тогда он не работал для 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 Tendu темы style.css:

html, body {height: 100%;}

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

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

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

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

+8
04 апр. '10 в 16:47
источник

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

<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 preview поддерживает его, поэтому у вас есть возможность использовать JavaScript для предотвращения выбора фонового изображения (например, http://www.felgall.com/jstip35.htm) или используя CSS 3 background-stretch method.

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

+8
06 июл. '11 в 10:38
источник

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

ИЗОБРАЖЕНИЕ INLINE: ------------------------

<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
24 дек. '10 в 13:05
источник

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

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

+4
09 сент. '13 в 23:49
источник

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

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

+1
02 июл. '17 в 13:51
источник

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

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

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

+1
12 нояб. '18 в 4:02
источник

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

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

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

0
29 янв. '19 в 22:12
источник

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

background-size: 100% 100%

0
19 нояб. '18 в 12:29
источник

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

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

-1
19 июл. '09 в 16:08
источник

Посмотрите другие вопросы по меткам или Задайте вопрос