0

背景画像が体の高さを拡大するのを止めようとしてきましたが、うまくいきませんでした。背景画像ではなく、コンテンツを増やしたときにのみ本文を拡大したいのですが。

コードスニペットは次のとおりです。

body
{
    background-color: #000000;
    color: #FFFFFF;
    font-family: Georgia, Verdana, Geneva, sans-serif;
    overflow-x: hidden;
}

#background_container img
{
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 -1250px;
    z-index: -10;
}

<body>



                <div id="background_container">

                    <img src="_images/main_background.jpg" width="2500" height="2003">

                </div>

                <div> 

            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 

            </div>

</body>

コンテンツが多い場合にのみボディの高さが拡張され、これが発生するまでスクロールバーが表示されないように機能するはずです。

私はJavaScriptをまったく使いたくありません。

前もって感謝します

4

1 に答える 1

2

このCSSを試してください：

body
{
    background-color: #000000;
    color: #FFFFFF;
    font-family: Georgia, Verdana, Geneva, sans-serif;
    overflow-x: hidden;
}
body > div
{
    background-image: url(_images/main_background.jpg);
    background-position: top center;
}

代わりにこのhtmlで

<body>
        <div> 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        </div>
</body>

デモ - 背景に何を使用しているか推測できないため、デモでは外部画像を使用しました。div に contenteditable を追加し、javascript で焦点を合わせたので、入力を開始して、div のサイズが大きくなるにつれて背景が div とともにどのように拡大するかを確認できます。

于 2012-10-13T01:46:26.420 に答える