CSS background-image bottom of div
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;
}
![Psychokiller1888](https://i.stack.imgur.com/z37B0.gif?s=256&g=1)
Psychokiller1888
I love coding, might not be the best, but I always find a solution. I won't write your code but I'll help you finding the way to it
Updated on June 04, 2022Comments
-
Psychokiller1888 about 2 years
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.