CSS-如何拉伸和自动调整背景图像的大小

Question

我正在尝试使我的背景图像延伸到整个页面，但到目前为止，我有这个：

这是我要在浏览器窗口中拉伸的图片：

我的外部CSS包含以下代码：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("mybackground.jpg")} 

谁能告诉我如何编辑CSS文件来解决我的问题？

Answer 1

您可以使用：

background-size: cover;

但是，请记住这支持哪些浏览器 。 例如，这在IE8及以下版本中将不起作用。

Answer 2

另一种选择还包括：

body{
   background-image:url("mybackground.jpg")
   background-size:contain;
   background-repeat:no-repeat;
}

Answer 3

使用background-size: cover 。 请注意其浏览器支持。

MDN文档 。

Answer 4

背景大小可以解决问题：

    body { 
     background: url(images/bg.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
   }

查阅更多信息： http : //css-tricks.com/perfect-full-page-background-image/

Answer 5

您需要将其设置为<img>标签，且z-index较低，并且position: fixed ，然后对于<img>标签，请使用height: 100%; width: auto height: 100%; width: auto或相反。

此方法与所有浏览器都兼容。

Answer 6

您是否尝试过使用

background-size: 10px 10px

更改宽度和高度为10

你也可以

background-size: 100%