Question

我的背景图片并未覆盖我页面上的所有内容，而是仅应用了屏幕的一半。

具有相同图像的相同代码正在我的另一页上正常工作。唯一的区别是我在这个页面上有很多内容，但我认为这无关紧要。

问题出在哪里？

提前致谢。

HTML

<html>

<head>

</head>

<body>

<div id="main">
   <!--Here i have multiple sections-->
</div>
</body>
</html>

CSS

#main {
   position: relative;
}
#main:before {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../..//images/3.jpg) center center fixed; 
    width: 100%;
    height: 100%;
    opacity : 0.2;
filter: alpha(opacity=20);
    z-index: -1;

Answer 1

试试这段代码

background-size:100% 100%;

Answer 2

嗨，您只需尝试使用以下CSS代码段

background: url(../..//images/3.jpg);
background-repeat:no-repeat;
background-size:contain;

Answer 3

此方法可以使用

  body
{
margin:0px;

width: 100%;
    height: 100%;

}
#main {
     background-image: url('download.jpg');
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Answer 4

这里你使用的是psudeo元素：之前.psudeo元素的功能：之前如下。它会在第一个索引处附加一个子节点。在你的情况下，你试图在div元素之前附加一个图像。这与你的整个身体不对应。

要使图像适用于您的整个身体，请尝试以下方法：

 body
{
margin:0px;
width: 100%;
height: 100%;
background: url(../..//images/3.jpg) repeat left top;
}

删除你的psudeo元素：在

之前

#main {
   position: relative;
   /*Other CSS Properties*/
}

Answer 5

尝试这个

background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;

Answer 6

我猜你在写你的身份证时错过了双引号。

<html>
<head>
</head>
<body>
<div id="main">
<!--Here i have multiple sections-->
</div>
</body>
</html>

为什么背景图像显示在屏幕的一半？

6 个答案: