完整的背景圖片;內容不滾動

我已經實現了一個完整的，不滾動的CSS背景圖像。但是，當內容本身溢出頁面時，不會出現滾動條，並且看不到內容。我嘗試過在我的幾個div中使用「overflow：scroll」的各種變體，但無濟於事;滾動條出現，但不滾動，或不正確滾動。我認爲我的div可能存在結構性問題，但我對CSS沒有特別的經驗，無法在StackOverflow上找到與此類似的線程。完整的背景圖片;內容不滾動

http://jsfiddle.net/YXp5p/

<body> 

<div id="bg"> 
    <img src="images/background.jpg"> 
</div> 

<div id="wrapper"> 
    <div id="header"> 
     thread #6bUp0 
    </div> 

    <div id="sidebar"> 
     <div id="content"> 
      <div id="post"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat ante, placerat accumsan aliquam at, rhoncus eget nunc. 
      </div> 
     </div> 
    </div> 

</div> 

</body> 

body{ 
    margin: 0px; 
    color: #000; 
    font-family: helvetica, times; 
    font-size: 16px; 
} 

#bg { 
    position:fixed; 
    top:-50%; 
    left:-50%; 
    width:200%; 
    height:200%; 
} 
#bg img { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
    min-width:50%; 
    min-height:50%; 
} 

#wrapper { 
    position: fixed; 
    top:0%; 
    left:18%; 
    width: 59%; 
    height:200%; 
    padding: 0%; 
} 

#header { 
    background: url(images/header.gif) repeat-x; 
    border: 1px solid black; 
    width: 100%; 
    height:29px; 
    padding-left: 3%; 
    padding-right: 3%; 
    padding-top: 6px; 
    font-family: "Lucida Console", "Courier New", sans-serif; 
    text-align: center; 
    font-size: 20px; 
    font-weight: bold; 
} 

#sidebar { 
    background-color: #EEEEEE; 
    width: 100%; 
    height: 100%; 
    padding-left: 3%; 
    padding-right: 3%; 
    right: 3%; 
    border-left: 1px solid #000; 
    border-right: 1px solid #000; 
} 

#content { 
    background-color: #FFFFFF; 
    width: 100%; 
    height: 100%; 
    border-left: 1px solid #000; 
    border-right: 1px solid #000; 
    opacity: 1; 
    padding-top: 8px; 
} 

#post{ 
    margin-left: 8px; 
    margin-right: 8px; 
    margin-bottom: 5px; 
    background-color: #FFF; 
    opacity: 1; 
}

來源

2012-09-01 user1640722

您正在尋找background-attachment:fixed沒有position:fixed你可以達到你想要的東西是這樣的：

 
body{ 
    background-image:url('images/background.jpg'); 
    background-position:center top; 
    background-attachment:fixed; 
    margin: 0px; 
    color: #000; 
    font-family: helvetica, times; 
    font-size: 16px; 
}

噢，並刪除：的

<div id="bg"> 
    <img src="images/background.jpg"> 
</div>

部分你的文件。

來源

2012-09-01 16:31:06

非常感謝您的回覆。我做了你所說的，但圖像出現平鋪，而不是以前的實現，這使得它適合。當內容溢出時，也不會出現滾動條。有任何想法嗎？ – user1640722

完整的背景圖片;內容不滾動

回答

相關問題