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

Question

我想让背景图片覆盖整个页面，但到目前为止我只有这个：

这是我想要覆盖浏览器窗口的图片：

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

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

有人能告诉我如何编辑CSS文件以解决我的问题吗？

- user1283674

---

可能是Stretch and scale CSS background的重复问题。 - FelipeAls

Answer 1

您可以使用:

background-size: cover;

请注意，此属性受支持的浏览器。例如，它无法在IE8及以下版本中使用。

- MMM

Answer 2

另一个选项也可以包括：

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

- Arthur Weborg

Answer 3

背景大小可以解决问题：

    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/

- moodyjive

Answer 4

使用background-size: cover。请注意其浏览器支持情况。 MDN文档。

- alex

Answer 5

你尝试过使用吗？

background-size: 10px 10px

将 body 的宽度和高度改为 10

你也可以这样做

background-size: 100%

- JMG

---

你如何知道网页主体的宽度和高度（以像素为单位）？320px、2560px，或者任何整数值都有可能。 - FelipeAls

使用 background-size: 100% 。 - JMG

这是一个问题吗？绝对任何整数值之间的值？ - JMG

一个措辞不当的评论：它可能是320到2560之间的任何值。 - FelipeAls

这是使用 background-size: 100% 的结果：http://jsfiddle.net/6TT2v/ 如果图片的宽高比与页面相同，那么就很好，否则... - FelipeAls

看起来宽度调整得很好，您不会想要同时调整高度，否则比例将被扭曲，因此您将使用 background-repeat: no-repeat ...问题是什么？ - JMG

Answer 6

你需要将它变成一个 <img> 标签，并设置一个低的 z-index，使用 position: fixed，然后为 <img> 标签使用 height: 100%; width: auto 或相反。

这种方法适用于所有浏览器。

- digitalextremist