Растянуть и масштабировать фон CSS

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

Для современных браузеров вы можете сделать это, используя 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')";

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

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

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

Масштабирование изображения с помощью 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.

Используйте атрибут background-size в CSS3:

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

РЕДАКТИРОВАТЬ: Modernizr поддерживает обнаружение поддержки размера фона . Вы можете использовать обходной путь JavaScript, написанный для работы, однако вам это нужно и загружать его динамически, когда нет поддержки. Это обеспечит поддержку кода, не прибегая к навязчивым хакерским работникам CSS для определенных браузеров.

Лично я использую скрипт для работы с ним, используя 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;
}

РЕДАКТИРОВАТЬ: Вы также можете быть заинтересованы в jQuery CSS3 Finaliz [s] e .

Попробуйте статью 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%;
} 

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

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

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

    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/

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

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

Определить «растянуть и масштабировать» ...

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

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

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

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

Боюсь, если вы используете векторную графику, вы выходите за рамки моего опыта.

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

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

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

Добавьте 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;
}

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

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

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

Попробуй это

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

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

Пример:

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

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