4

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;
}
4

1 に答える 1

6

あなたはあなたがこのようにあなたが望むものを達成することができbackground-attachment:fixedないことを探しています：position:fixed

体{
    background-image：url（'images / background.jpg'）;
    background-position：center top;
    background-attachment：fixed;
    マージン：0px;
    色：＃000;
    フォントファミリー：helvetica、回;
    フォントサイズ：16px;
}

ああ、そして削除します：

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

ドキュメントの一部。

于 2012-09-01T16:31:06.090 に答える