Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I change my background on scroll using CSS?

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;
}
like image 256
rob_towner Avatar asked Jul 11 '13 06:07

rob_towner


People also ask

How do I change my background while scrolling?

Changing background image on scrollAdd multiple empty <div> element on the web page. To each div add a background-image property. Add background-size , background-position and background-repeat properties to the background image. Set the height of each <div> element.

How do I change the scroll image?

You can use the onScroll event to listen for scrolling, check at what position the scrollbar is and make the image change or whatever your heart desires. You can read more about onScroll event here. A basic code will be something like this: var onScrollHandler = function() { var newImageUrl = yourImageElement.

How do you add a background color to the scrolling content in HTML?

Use the CSS 'scrollbar-base-color' property to change the color of the scrollbars attached to your HTML scrollboxes.

Which background CSS property determines if a background can scroll?

The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.


1 Answers

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/

like image 187
gmo Avatar answered Sep 28 '22 11:09

gmo