Question

I have the following code and want to achieve something like the below demonstrated outline. An image is shown on top of div, and as the user scrolls vertically, the other image is shown repeatedly.

However, I want to show the repeat.png exactly where the stayontop.png ends vertically. How can I achieve this? I tried different background-position:center top, center bottom; variations but no luck.

EDIT: Because the height of background image is in auto mode (background-size:100% auto, 100% auto !important;) Any solution which is based on the static height reference such as background-position:center 50px; unfortunately works fine in one div width, but fails when the user resize the div. (Actually when another user visits the site, with a mobile phone which has different resolution.) Is there anyway to set it dynamically?

!-+-+-+-+-+-+-

stayontop.png

!-+-+-+-+-+-+-

repat.png

!-+-+-+-+-+-+-

repat.png

!-+-+-+-+-+-+-

repat.png

!-+-+-+-+-+-+-

…..

.hede{
    background: url("css/images/stayontop.png"), url("css/images/repeat.png");
    background-repeat:no-repeat, repeat-y;
    background-position:center top, center bottom;
    background-attachment: scroll, scroll;
    background-size:100% auto, 100% auto !important;
    min-height:100%;
}

Answer 1

The background position property accepts a length value, besides just top, center, and bottom. So, just specify in pixels where stayontop.png ends:

background-position: center 200px;

Set the background position with JavaScript whenever the window is resized:

http://jsfiddle.net/gilly3/rKD8M/

onresize = resetBackgrounds;
function resetBackgrounds() {
    var els = document.querySelectorAll(".hede");
    for (var i = 0; i < els.length; i++) {
        var h = els[i].clientWidth * aspectRatio;  // must define aspectRatio
        els[i].style.backgroundPosition = "center top, center " + h + "px";
    }
}