0

所以我事先在这里进行了搜索,试图找到我的问题的答案,但我找到的所有解决方案都没有给我任何结果。基本上,我的 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>

我没有最模糊的线索我做错了什么。有人有想法么?:/

4

1 回答 1

0

只需删除 CSS:

position: fixed; 

#wrapperid 和背景图像将出现

于 2013-04-16T04:38:14.423 回答