背景图像宽度不起作用[重复]答案

【问题标题】：The background image width does not work [duplicate]背景图像宽度不起作用[重复]
【发布时间】：2018-03-25 02:31:28
【问题描述】：

我有一个 html 文件，我将背景 url 设置为图片，但图片没有填满浏览器的宽度：

我也尝试设置width属性使其更宽，但似乎没有效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #bg {

            height:1500px;
            background: url("img/timg7.jpg") center top no-repeat;
            width:1800px;
        }
    </style>

</head>
<body id="bg">

<div style="width:400px; height: 200px; background-color: antiquewhite">
    BLOCK
</div>

</body>
</html>

【问题讨论】：

你给了你的身体一个宽度？那是怎么回事？

标签： html css

【解决方案1】：

为此，您需要 background-size 属性。

你的 CSS 应该是：

#bg {

    background: url("img/timg7.jpg");
    background-size: cover;
    background-repeat: no-repeat;

}

【讨论】：

【解决方案2】：

在这种情况下，您应该使用 background-size，背景尺寸有一个demo。

尝试使用：

 background-size: 120%;

【讨论】：

【解决方案3】：

尝试使用：背景尺寸：封面；

请移除那些高度和宽度

【讨论】：

【解决方案4】：

试试这个：

#bg {

     background: url("img/timg7.jpg") center top no-repeat;
     background-size: cover;
}

【讨论】：

【解决方案5】：

#bg{
  background: url("img/timg7.jpg");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

【讨论】：

【解决方案6】：

你不需要在你的body 上添加一个 id，就像 document.body 使用 JavaScript 获取它一样，你可以在 CSS 中使用 body。当然，这不是你的问题。请看下面的代码：

html,body{
 padding:0; margin:0;
}
body{
  background:url(img/timg7.jpg) no-repeat; background-size:cover;
}

顺便说一句，你应该使用外部 CSS，所以它被缓存到浏览器内存中。

【讨论】：