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

Question

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

Answer 1

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

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

Answer 2

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

Answer 3

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

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

Answer 4

Добавить строку 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;
}

Answer 5

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

Пример:

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

Answer 6

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