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;
}
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.
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.
Use the CSS 'scrollbar-base-color' property to change the color of the scrollbars attached to your HTML scrollboxes.
The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With