背景图像宽度不工作

问题描述：

我有一个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>

你给了你的身体宽度？那是什么？ – PHPglue

答

需要在此的background-size属性。

你的CSS应该是：

#bg { 

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

}

答

在这种情况下，你应该使用背景大小，有一个背景大小demo。

尝试使用：

background-size: 120%;

答

尝试使用：背景尺寸：盖;

并请删除这些高度和宽度

答

试试这个：

#bg { 

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

答

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

答

你并不需要在你的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，所以它的缓存到浏览器内存。

背景图像宽度不工作

相关推荐