Home/ Questions/Q 8671321
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T18:55:19+00:00

I have been trying to stop my background image from expanding my body’s height,

  • 0

I have been trying to stop my background image from expanding my body’s height, with no successs. I would like the body to only be expanded when the content is increased, not my background image.

Here’s a code snippet:

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>

It should work so the body’s height is only expanded when I have more content, and will not have a scroll bar until this happens.

I do not want to use any javascript at all.

Thanks in advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this 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;
}

    with this html instead

    <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>

    DEMO – I used some external image in the demo, since I can’t possibly guess what you use for background. I added contenteditable to the div and focused it with javascript so you can start typing and see how the background expands with the div as the div grows in size.

    • 0