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 i.e .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>

@C-link I added some more explanation. please let me know if you still can't understand. — Mr_Green, Mar 04 '14 at 11:49
@Mr_Green - this is what position:sticky will be good for. See [here](http://html5-demos.appspot.com/static/css/sticky.html) and [here](http://stackoverflow.com/questions/15646747/css-position-sticky) and (then) [here] (http://jsfiddle.net/danield770/msUP9/) - if you enabled the flag — Danield, Mar 04 '14 at 12:49
@Danield thank you for this cool info. I hope this will be helpful for future users. :) btw that flag is now changed as the chrome engine is upgraded to blink. [link](http://www.chromium.org/blink/runtime-enabled-features) — Mr_Green, Mar 05 '14 at 04:53

Marcel Gwerder · Accepted Answer · 2014-04-18T20:55:18.930

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();    
});

Thanks very much.. somehow I didn't get ping for your answer.. I revisited my post to ask for bounty and found your solution.. I take that it is not possible with only css though. — Mr_Green, May 20 '14 at 06:55

score -1 · Answer 2 · answered Mar 04 '14 at 11:18

-1

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/

answered Mar 04 '14 at 11:18

Xanco

874
1
10
15

Xanco, where is the main container? I mean `.loader`. – Mr_Green Mar 04 '14 at 11:21
It may not appear due to the JSFiddle results window being so small, try this: http://fiddle.jshell.net/Ezhb4/4/show/ – Xanco Mar 04 '14 at 11:27
It should appear, it is the main container in my project. – Mr_Green Mar 04 '14 at 11:29
Is there any other HTML/CSS that you didn't include in your JSFiddle? It works fine over here: http://postimg.org/image/enljqw9ah/ I've commented out the background color, in the CSS, in case you were wondering – Xanco Mar 04 '14 at 11:35

keep the background image fixed position and centered

2 Answers2