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

Question

我正在努力让我的背景图片在整个页面上展开，但到目前为止，我有这个：

这是我希望在浏览器窗口中展开的图片：

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

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

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

Answer 1

您可以使用：

background-size: cover;

但请记住which browsers this supports。例如，这在IE8及以下版本中不起作用。

Answer 2

另一种选择还包括：

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

Answer 3

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

MDN documentation

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标记，使用{{1}}或对面。

此方法适用于所有浏览器。

Answer 6

您是否尝试过使用

background-size: 10px 10px

将10改为身体的宽度和高度

您也可以

background-size: 100%