Question

嗨请不要抨击我或给我否定投票，因为我确实花了很多时间并试图找到答案。从我搜索的内容来看，这就是我所拥有的。我正在尝试将背景图像作为我的身体，但是当我不再重复时，它只是一个瓦片而不是拉伸。我一直试图找到一个可以伸展它的代码，但没有任何东西存在。我试过youtube，试着看看这里

这是我的代码

body{
  background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA);
  background-repeat:no-repeat;
}

我的HTML

<html>
    <body>

      <div id="container">
      </div>


    </body>
</html>

Answer 1

的 Embedded Demo
的 jsFiddle Demo with code

比使用body元素更好的方法是放置一个为你做这个的div。

<head> <style> #background{ background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA); position:fixed; right:0;left:0;top:0;bottom:0; width:100%; height:100%; } </style> </head> <body> <div id="bacgrkound"></div> </body>

Answer 2

这将有效：

body {
  background: url((https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA) no-repeat;
  background-size: 100%;
}

Answer 3

body {
background: url((https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA) no-repeat;
background-repeat:no-repeat;
background-size:cover;
}

这将cover您的屏幕。

Answer 4

http://jsbin.com/IJObemU/1/

body{
  background: url(image.jpg) no-repeat center center fixed;
  background-size: cover;
}

如果您需要在背景fixed机器人不在body元素上（如果您在某些与页面滚动的元素上应用背景），则可以删除cover。

我对背景图片没有重复，但如何拉伸瓷砖？

4 个答案: