keep the background image fixed position and centered

Question

In my project, I need to show a small image in center of the visible part of the container, with respect to the window ie .loader . Even when the user scrolls the page, the image should be visible in center of .loader .

I successfully implemented this but now I am facing a edgecase which is when user scrolls the page "up to the header" or "down to the footer", the small image is hiding. demo .

This is actually normal behaviour but in these edgecases, I want the image to stick to top/bottom end of the .loader container.

What I want:

• Keep the small image always at center of .loader container. ( I already implemented this )
• when scrolled to any end of .loader container , the image should stick to that end instead of hiding behind the container.

Fiddle

A solution using just css is preferred. I am looking for browser support in IE9+, chrome and firefox.

 .header { height: 600px; width: 650px; background-color: grey; } .left-side { height: 300px; width: 150px; float: left; background-color: red; } .loader { background-image: url('http://i.imgur.com/U2njI.jpg'); margin-left: 150px; height: 1500px; width: 500px; background-position: 345px center; background-repeat: no-repeat; background-attachment: fixed; background-color: cornflowerblue; } .footer { height: 600px; width: 650px; background-color: silver; } 

 <div class="header"></div> <div class="left-side"></div> <div class="loader"></div> <div class="footer"></div> 

Answer 1

Here is a working solution with javascript, I hope its behaviour is how you expect it to be. I'm unfortunately not able to test it on IE9 right now but it should work ( DEMO ):

document.addEventListener('DOMContentLoaded',function() {
    var loader = document.querySelector('.loader'),
        loaderRect = loader.getBoundingClientRect(),
        loaderTop = loaderRect.top + document.body.scrollTop,
        loaderBottom = loaderTop + loader.offsetHeight,
        initialBgPos = loader.style.backgroundPosition,
        imageHeight = 141;

    function onScroll() {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        if(loaderTop >= (scrollTop + (window.innerHeight - imageHeight)/2)) {
            loader.style.backgroundPosition='345px ' + (loaderTop - scrollTop) + 'px'; 
        } else if(loaderBottom <= (scrollTop + (window.innerHeight + imageHeight)/2)) {
            loader.style.backgroundPosition='345px ' + (loaderBottom - scrollTop - imageHeight) + 'px'; 
        } else {
           loader.style.backgroundPosition = initialBgPos;
        }
    }

    window.addEventListener('scroll', onScroll);
    onScroll();    
});

Answer 2

To achieve what I think you want. We have to set the position of the .loader div to fixed, then it'll always stay where it's placed, regardless of whether the user scrolls the page, the div will scroll too. In here's how to set the position of loader to fixed in CSS (you may also have to get the position of your fixed div):

.loader{
    position: fixed;
    left: 100px;
    top: 300px;
 }

Here's your upadted JSFiddle: http://jsfiddle.net/Ezhb4/4/