CSS-повторение фона

Question

Есть ли способ растянуть фоновое изображение, а не повторять его?

Answer 1

Не использовать какой-либо кроссбраузерный CSS (есть background-size собственность однако.)

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

Вот как это можно сделать в последних браузерах:

body {
    background-image: url(bg.jpg);
    -moz-background-size: 100% 100%;     /* Gecko 1.9.2 (Firefox 3.6) */
    -o-background-size: 100% 100%;       /* Opera 9.5 */
    -webkit-background-size: 100% 100%;  /* Safari 3.0 */
    -khtml-background-size: 100% 100%;   /* Konqueror 3.5.4 */
}

В противном случае, используя <img>:

img#background {
    /* height: 100%; Note: to keep ratio, don't use height */
    left: 0;
    position: fixed; /* or absolute, if you like */
    top: 0;
    z-index: -1;
    width: 100%;
}

Answer 2

Только в CSS3

Вы можете использовать изображение и установить его ширину и высоту на 100%, z-индекс на -1, положение на абсолютное.Это может сработать.

Answer 3

размер фона — CSS3 и пока не поддерживается.Вы можете взглянуть на эту статью: Как растянуть фоновое изображение на веб-странице

Надеюсь это поможет.

Answer 4

body
{ 
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}

http://www.w3schools.com/css/css_background.asp

Это не растянет ваше изображение, но позволит ему не повторяться.