Растяжка и масштаб CSS-фона

Есть ли способ получить фон в CSS для растягивания или масштабирования, чтобы заполнить его контейнер?

Ответ 1

Для современных браузеров вы можете выполнить это, используя background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover означает растягивание изображения по вертикали или по горизонтали, чтобы он никогда не повторялся/повторялся.

Это будет работать для Safari 3 (или более поздней версии), Chrome, Opera 10+, Firefox 3.6+ и Internet Explorer 9 (или более поздней).

Чтобы он работал с более низкими версиями Internet Explorer, попробуйте эти CSS:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Ответ 2

Используйте свойство CSS 3 background-size:

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

Это доступно для современных браузеров с 2012 года.

Ответ 3

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

Используйте эту разметку:

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

со следующим CSS:

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

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

и вы должны быть готовы!

Чтобы масштабировать изображение до "полного истечения" и поддерживать соотношение сторон, вы можете сделать это вместо:

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

Это хорошо работает! Однако, если одно измерение обрезается, оно будет обрезано только на одной стороне изображения, а не равномерно обрезано с обеих сторон (и центрировано). Я тестировал его в Firefox, Webkit и Internet Explorer 8.

Ответ 4

Используйте атрибут размера фона в CSS3:

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

EDIT: Modernizr поддерживает обнаружение поддержки размера фона. Вы можете использовать обходное решение JavaScript, написанное для работы, но оно вам нужно и загружать его динамически, когда нет поддержки. Это сохранит код, поддерживаемый, не прибегая к интрузивным CSS-хакам для определенных браузеров.

Лично я использую script для работы с ним, используя jQuery, его адаптацию imgsizer. Поскольку большинство проектов, которые я сейчас использую, используют ширину% для макетов жидкостей на разных устройствах, есть небольшая адаптация к одному из циклов (учет размеров не всегда 100%):

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

EDIT: Вы также можете быть заинтересованы в jQuery CSS3 Finaliz [s] e.

Ответ 5

Попробуйте статью background-size. Если вы используете все следующие, он будет работать в большинстве браузеров, кроме Internet Explorer.

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
}

Ответ 6

В настоящее время нет. Он будет доступен в CSS 3, но это займет некоторое время, пока оно не будет реализовано в большинстве браузеров.

Ответ 7

.style1 {
        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 Whatever +
IE 9+
Opera 10+ (Opera 9.5 поддерживает размер фона, но не ключевые слова)
Firefox 3.6+ (Firefox 4 поддерживает версию с префиксом, отличную от поставщика)

Кроме того, вы можете попробовать это для решения ie

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;

Кредит на эту статью Криса Койера http://css-tricks.com/perfect-full-page-background-image/

Ответ 8

~~Одним словом: нет. Единственный способ растянуть изображение - это тег <img>. Вы должны быть творческими.~~

Это было правдой в 2008 году, когда был написан ответ. Сегодня современные браузеры поддерживают background-size, который решает эту проблему. Помните, что IE8 не поддерживает его.

Ответ 9

Определите "растягивание и масштабирование"...

Если у вас есть формат растрового изображения, он вообще не большой (графически говоря), чтобы растянуть его и потянуть. Вы можете использовать повторяемые шаблоны, чтобы придать иллюзию того же эффекта. Например, если у вас есть градиент, который становится светлее в нижней части страницы, тогда вы должны использовать графику с шириной одного пикселя и той же высотой, что и ваш контейнер (или, желательно, больше для учета масштабирования), а затем нанести его на стр. Аналогично, если градиент перешагнул страницу, он был бы на один пиксель выше и больше, чем ваш контейнер, и повторил страницу.

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

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

Что касается того, что изображение действительно сжимается и растет с контейнером, вам нужно будет использовать некоторые фокальные трюки, чтобы изображение выглядело как фон и некоторый javascript, чтобы изменить его размер с помощью контейнера. Нет никакого способа сделать это с помощью CSS...

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

Ответ 10

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

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

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

Ответ 11

Добавьте строку background-attachment:

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

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

Ответ 12

Я хотел бы указать, что это эквивалентно выполнению:

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

Ответ 13

Другим замечательным решением для этого является Srobbin Backstretch, который может быть применен к телу или любому элементу на странице - http://srobbin.com/jquery-plugins/backstretch/

Ответ 14

Попробуйте это

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

Ответ 15

Дополнительным советом для читов SolidSmile является масштабирование (пропорциональное изменение размера) путем установки ширины и автоматического использования для высоты.

Пример:

#background {
    width: 500px;
    height: auto;
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

Ответ 16

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