CSS background-image bottom of div

Question

Here's what I have:

<div id="page_container">
    A short text
</div>

#page_container
{
    position: absolute;
    top: 120px;
    left: 280px;
    right: 30px;
    background-color: #D0D0CD;
    border-radius: 5px;
    box-shadow: 1px 1px 12px #555;
    height: 1060px;
    overflow: auto;
    background-image: url(./library/grappe.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

So, my div is 1060px, on the right of my screen, and has an image on the right bottom corner. So far so right. Nice looking with a short text.

Due to the overflow: auto, a long text won't make my div higher, but add a scrollbar to it, that's what I want.

However, the background-image stays glued to the div right bottom corner, instead of basically not showing and first show when I scroll down the div that has a scrollbar. Basically the image stays on the same position, like a position: fixed. Can't get to change that behavior.

Answer 1

You need to add an inner div, and that inner div will have the background while the first one will handle the scrolling.

<div id="page_container">
    <div class="block_container">
        A short text
    </div>
</div>

CSS part

#page_container
{
    position: absolute;
    top: 120px;
    left: 280px;
    right: 30px;
    border-radius: 5px;
    box-shadow: 1px 1px 12px #555;
    height: 1060px;
    overflow: auto;
}

#page_container .block_container
{
    background: #D0D0CD url('./library/grappe.png') bottom right no-repeat;
}