2017-10-13 128 views
0

我有一个HTML文件,然后我设置背景图片网址,但图像没有填满浏览器的宽度:背景图像宽度不工作

enter image description here

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

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

回答

4

需要在此的background-size属性。

你的CSS应该是:

#bg { 

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

} 
0

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

尝试使用:

background-size: 120%; 
0

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

并请删除这些高度和宽度

0

试试这个:

#bg { 

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

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