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

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

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

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

width:100%; height:100%;

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

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

Ответ 1

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

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

Ответ 2

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

background-size: 100%;

Ответ 3

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

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

Ответ 4

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*/
}

Ответ 5

background-size: 100% 100%;

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

background: url('img.png') no-repeat; 
background-size: 100%;

Ответ 9

Вы можете добавить этот класс в свой файл 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 поддерживает версию с префиксом не от поставщика)

Ответ 10

Это объясняется хитростями 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;
}

Ответ 11

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

background-size: contain;
background-repeat: no-repeat;

Ответ 12

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

<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>

Ответ 13

Спасибо!

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

Ответ 14

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

Ответ 15

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

ИЗОБРАЖЕНИЕ 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%;
}

Ответ 16

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

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

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

Ответ 17

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

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

Ответ 18

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

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

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

Ответ 19

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

background-size: 100% 100%

Ответ 20

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

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

Ответ 21

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

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