Повторение фонового рисунка 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

Only in CSS3

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

Answer 3

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

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

Это не streach изображения, но это сделает изображение не повторять.

Answer 4

Размер фона CSS3 и еще не поддерживается. Вы можете взглянуть на эту статью: How Do you Stretch a Background Image in a Web Page

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