HTML＆CSS：#wrapper background-image does not appear

所以我在這裏事先搜索過，試圖找到我的問題的答案，但是我發現的所有解決方案都沒給我結果。基本上，我在我的div＃wrapper中有一個圖像，我想要顯示，但它不會除非我填充區域 - 在各個div之後加上文本。HTML＆CSS：#wrapper background-image does not appear

我有溢出：auto;在我的#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>

我一點都不知道什麼線索，我做錯了。有人有主意嗎？：/

來源

2013-04-14 CyanCorsair

請提供簡化的[jsfiddle]（http://jsfiddle.net） – Adrift

如果沒有資產或顏色，調試真的很難：http://tinker.io/299c7 – cimmanon

所以結果是，沒有指定高度使其消失。 – CyanCorsair

剛移除位置：固定;從#wrapper id background-image會出現

來源

2013-04-16 04:38:14 Nilesh

HTML＆CSS：#wrapper background-image does not appear

回答

相關問題