Question

所以我事先在这里进行了搜索，试图找到我的问题的答案，但我发现的所有解决方案都没有给我带来任何结果。基本上，我在div＃wrapper中有一个我想要显示的图像，但除非我用相应的div填充区域，否则它将不会显示。

我有溢出：自动;在我的#wrapper中，因为我在随后的div中浮动。

CSS文件：

@media only screen and (min-width: 25em) {
   html {
   background: url(images/gridbg.jpg) repeat fixed center top;
   }
}

@media only screen and (max-width:25em) {
    html {
    background-color:#0c0c1f;
    }
}

img {
    border:0px;
}

textarea:focus, input:focus{
    outline: none;
}

#wrapper {
    margin:0 auto;
    width:60em;
    overflow:auto;
    background-image:url(images/cont-bg.png);
}

#content {
    text-align:justify;
    position:fixed;
    width:59em;
    height:100%;
    overflow:auto;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    outline:none;
    z-index:2;
    margin-top:12em;
}

#homeNav {
    position:fixed;
    float:left;
    margin-left:0.65em;
    margin-top:0.65em;
    z-index:3;
}

#primaryNav {
    z-index:2;
    float:right;
    margin-left:28em;
    margin-top:1em;
    position:fixed;
}

#navGFX {
    background-image:url(images/navGFX.png);
    background-repeat:no-repeat;
    width:60em;
    height:8em;
    float:left;
    position:fixed;
    z-index:1;
    margin-top:3em;
}

HTML文件：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ag Design</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="scrollstyles.css"/>

<script type='text/javascript' src="js/flexcroll.js"></script>
</head>

<body>
<div id="wrapper">

<div id="navGFX">
<div id="homeNav"><a href="index.html"><img src="images/buttons/btn_logo.png"></a></div>
<div id="primaryNav">
<a href="index.html"><img src="images/buttons/btn_home.png"></a>
<a href="index.html"><img src="images/buttons/btn_link1.png"></a>
<a href="index.html"><img src="images/buttons/btn_link2.png"></a>
<a href="index.html"><img src="images/buttons/btn_link3.png"></a>
<a href="index.html"><img src="images/buttons/btn_link4.png"></a>
</div>
</div>

<div id="content" class="flexcroll">
This area is full of filler text
</div>
</div>
</body>
</html>

我没有最模糊的线索我做错了什么。有人有主意吗？：/

Answer 1

只需删除CSS：

position: fixed;

来自#wrapper ID的

将出现背景图片

HTML＆amp; CSS：#wrapper background-image不会出现

1 个答案: