背景图像宽度不起作用[重复]
Posted
技术标签:
【中文标题】背景图像宽度不起作用[重复]【英文标题】：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>
【问题讨论】：
你给了你的身体一个宽度？那是怎么回事？ 【参考方案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，所以它被缓存到浏览器内存中。
【讨论】：
以上是关于背景图像宽度不起作用[重复]的主要内容，如果未能解决你的问题，请参考以下文章