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

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

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

в этом АН img тег помещается, а затем с помощью CSS мы отдаем должное img тег.

width:100%; height:100%;

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

есть ли хороший метод, чтобы сделать это с background-image декларации?

18 ответов


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

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


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

background-size: 100%;

С помощью код Я уже упоминал...

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


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

background-size: 100% 100%; 

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


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


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

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

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


Вы можете добавить этот класс в 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 или позднее
  • Опера 10 или более поздней версии (Opera 9.5 поддерживается background-size, но не ключевые слова)
  • Firefox 3.6 или более поздней версии (Firefox 4 поддерживает версию без префикса поставщика)

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

демо: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;
}

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

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

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

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

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

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


спасибо!

но тогда это не работало для Google Chrome и сафари - браузеры (растяжка работала, но высота фотографий была всего 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%;
}

непосредственно перед этим недавно добавленным кодом у меня есть это в моем Друпал тандю темы style.css:

html, тело{высота: 100%;}

#страницы{фон:#ffffff; высота:авто !важно; высота: 100%; min-высота: 100%; положение: относительное;}

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

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


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

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

<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%;
}

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

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


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

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


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

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