How to change background to scroll using CSS?

Question

My site has a PERFECT PAGE PICTURES A FULL PAGE. I took the code for it from css tricks .

If you visit my site , you can see it in action.

What would I like to know if there is a way to change the image to another image after scrolling a certain length?

My goal is to have the same image, but with a speech bubble coming out of the mouth of the dogs, and I guess 2 images will do it.

Can this be done only in CSS?

Here is the code I'm 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; } 

Answer 1

As others have said, Nop, you can not only with CSS , but a little js code can do it for you.

Ref.

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

This way you add or remove a class in the HTML tag at some distance from the top using javascript (in this case jQuery) ... and CSS by modifying this image.

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

Good luck.

EDIT: Sample script: http://jsfiddle.net/pZrCM/