Растягивание и масштабирование фона CSS

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

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

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

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

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

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

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

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

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

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

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

Бывший:

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

Вот что я из этого сделал. В классе stretch я просто изменил высоту на 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;
}

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

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

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

Лично я использую сценарий, чтобы справиться с этим с помощью jQuery, это адаптация imgsizer. Поскольку в большинстве дизайнов я сейчас использую width% для плавных макетов на разных устройствах, есть небольшая адаптация к одному из циклов (с учетом размеров, которые не всегда 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.

Попробуйте статью размер фона. Если вы используете все перечисленное ниже, оно будет работать в большинстве браузеров, кроме 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%;
} 

В современных браузерах это можно сделать с помощью background-size:

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

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

Это будет работать для Safari 3 (или новее), Chrome, Опера 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')";

Хочу отметить, что это равносильно выполнению:

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

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

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

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

Еще одно отличное решение для этого - 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;
}

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

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