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

background-size是CSS3，不支持。 你可以看看這篇文章：How Do you Stretch a Background Image in a Web Page

希望這會有所幫助。