How do I change my background on scroll using CSS?

Question

My website has THE PERFECT FULL PAGE BACKGROUND IMAGE. I grabbed the code for it from css tricks.

If you visit my site you can see it in action: <site no longer available>

What I'd like to know is, is there a way I can have this image change to a different image once you scroll a certain length?

My aim is to have the same image but with a speech bubble coming out of the dogs mouth and I'm guessing 2 images will do this.

Is this possible to do in CSS only?

Here is the code I am currently using.

html { 
background: url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Check my [answer](http://stackoverflow.com/a/17022668/1763929) from a similar question. — Vucko, Jul 11 '13 at 06:18
[Similar question with jquery solution](http://stackoverflow.com/questions/16236625/change-div-background-color-on-percentage-of-height) — Sumurai8, Jul 11 '13 at 06:23
I don't think it is possible to do this with CSS only. I don't think there is a way to detect the 'scrollTop' from or 'visibility' of an element without javascript. — Sumurai8, Jul 11 '13 at 06:27
I thought as much. What way would be best? Will I have to sacrifice the "perfect full page background" to make it happen? — rob_towner, Jul 11 '13 at 06:36

gmo · Accepted Answer · 2013-07-11T08:41:48.117

12

As others already said, Nop, you can't only with CSS, but a little js code can do it for you.

Ex.

jQuery(window).scroll(function(){
    var fromTopPx = 200; // distance to trigger
    var scrolledFromtop = jQuery(window).scrollTop();
    if(scrolledFromtop > fromTopPx){
        jQuery('html').addClass('scrolled');
    }else{
        jQuery('html').removeClass('scrolled');
    }
});

And in your CSS file:

html {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

html {
    background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}

html.scrolled {
    background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}

So basically you are adding or removing a class to the HTML tag at some distance from the top with javascript (jQuery in this case)... and with CSS, changing that image.

Now on.. you can apply some transitions to the image, or play with the code to made it slideToggle for example instead changing the class.... and many many other options.

Good luck

EDIT: Fiddle example: http://jsfiddle.net/pZrCM/

edited Jul 11 '13 at 08:41

answered Jul 11 '13 at 08:35

gmo

8,860
3
40
51

would it be easy to add more images that would change at say 400 and 700 pixels? – rob_towner Jul 12 '13 at 01:48
If it's `easy or not` is not the problem... *You have to find out what you want to do and how, and then, find the best sistem to do it.* So if you want a very big portrait picture, just scroll down and you will see it... Or add more pictures and you going to have the same effect. BUT... The way we are talking here with `jQuery` actually Interacts with the page, depending on user movement (scrolling in this case) so litterary `changes an object style properties` modifying the DOM. – gmo Jul 12 '13 at 06:48
Forgot the previus comment, I misunderstood the question. Yes It's very easy, only have to add a few more `if elseif else` to the `scroll function`. – gmo Jul 12 '13 at 06:55
Ok, the basic `background-image` changing regarding the position is working in your example (thanks), but is there a way to make it work in IE too? I know, this is a stupid question but I have to ask. Actually, it's working in IE (8 at least) but whenever the change occur (above 200px in the above example), the screen (or more likely the element which has the switching background) is flashing. Anyway to tell IE to (maybe) preload the background? Or maybe using a smaller background file? Thanks – morespace54 Sep 27 '13 at 21:25
Not sure if I understand your problem, the example I gave, is tested and running in CR, FF, IE10/09/8/7/6. Can you try to explain a little bit more... or, if the problem is different from the OP, open a new question. – gmo Sep 30 '13 at 12:24

How do I change my background on scroll using CSS?

1 Answers1

Linked