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

这不会streach你的形象，但它会使图像不重复。