Having a bit of trouble with background image positioning here - it's simple enough to set a repeating background that starts from a specific point at the top. But what I'm trying to achieve is a black background that starts 100px from the top of the page and then repeats vertically.
So, my question is - how can I create the same effect, but have the background repeat from the bottom instead? I want to leave those 100px of space at the bottom unfilled with a background color.
Currently, I've managed to make it work without scrolling. However, when scrolling, I see a black background, then a 100px space at the bottom of the window. If I scroll down, that 100px stripe remains at the bottom while scrolling. What I'm aiming for is a background that fills the screen but stops when there's 100px left at the bottom.
(I plan on adding a transparent logo at the bottom, so solutions involving overlapping elements or z-index tricks won't work for me at the moment.)
body {
background-image: url(UI/img/stripe-stripe.png)!important;
background-repeat: repeat-y !important;
background-position: right -100px;
background-color: #e6e2df !important;
}
Unfortunately, the code above doesn't yield the desired result. I want the background to repeat vertically, stopping 100px before the bottom.