Question

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

我还尝试设置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>

Answer 1

您需要background-size属性。

你的CSS应该是：

#bg {

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

}

Answer 2

在这种情况下，您应该使用背景大小，背景大小为demo。

尝试使用：

 background-size: 120%;

Answer 3

尝试使用： background-size：cover;

请删除这些高度和宽度

Answer 4

试试这个：

#bg {

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

Answer 5

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

Answer 6

您在body上不需要ID，document.body需要使用JavaScript获取ID，您只需在CSS中使用body即可。当然，这不是你的问题。请参阅以下代码：

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

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

背景图像宽度不起作用

6 个答案: