MikeatW3S Posted January 14, 2015 Share Posted January 14, 2015 (edited) I'd like to change the background image to different images as the user scrolls through the page in order to provide some entertainment value to my site. How does one do that? Thanks. Edited January 14, 2015 by MikeatW3S Link to comment Share on other sites More sharing options...
justsomeguy Posted January 14, 2015 Share Posted January 14, 2015 One option would be to have several CSS classes with different background, and change the class on the body element. Link to comment Share on other sites More sharing options...
MikeatW3S Posted January 14, 2015 Author Share Posted January 14, 2015 I guess I'm looking for the basic instruction to change the background image. And then from there I can worry about whether to change it at various times or at various scroll locations. But I need the basic instruction first. Thanks. Link to comment Share on other sites More sharing options...
davej Posted January 14, 2015 Share Posted January 14, 2015 See... http://www.w3schools.com/jsref/prop_style_backgroundimage.asp 1 Link to comment Share on other sites More sharing options...
MikeatW3S Posted January 14, 2015 Author Share Posted January 14, 2015 (edited) See... http://www.w3schools.com/jsref/prop_style_backgroundimage.asp Oh cool! Exactly what I'm looking for. Question: Can I keep the background images on the server until needed? Or do I have to download all images before displaying them? Thanks. Edited January 14, 2015 by MikeatW3S Link to comment Share on other sites More sharing options...
Ingolme Posted January 14, 2015 Share Posted January 14, 2015 When you set the backgroundImage property, the browser checks to see if this image is stored in the cache and will try to load it from there; if the image isn't cached then it will download the image from the server. 1 Link to comment Share on other sites More sharing options...
MikeatW3S Posted January 15, 2015 Author Share Posted January 15, 2015 When you set the backgroundImage property, the browser checks to see if this image is stored in the cache and will try to load it from there; if the image isn't cached then it will download the image from the server. Again cool! I think I'm on my way to creating a decent website. Thanks lots Link to comment Share on other sites More sharing options...
MikeatW3S Posted January 15, 2015 Author Share Posted January 15, 2015 Is there a way to have the background image fade in and out to a white plain background? Hopefully there are statements to that effect that I can employ. Is there a way to anchor the background image at, say, the upper right corner of the page, no matter how the user sizes the window? I hope there is because this would make editing very easy. Thanks. Link to comment Share on other sites More sharing options...
Ingolme Posted January 15, 2015 Share Posted January 15, 2015 You can't change the opacity of the background image. You can put the background image in the top right corner of the box that contains it by setting the background-position property. 1 Link to comment Share on other sites More sharing options...
MikeatW3S Posted January 15, 2015 Author Share Posted January 15, 2015 (edited) Is there a slow morphing code from one background pic to another? Thanks. Actually I found this, which seems to work well: http://jsfiddle.net/v4BMC/ Edited January 15, 2015 by MikeatW3S Link to comment Share on other sites More sharing options...
justsomeguy Posted January 15, 2015 Share Posted January 15, 2015 That's sort of a hack. Instead of being an actual background image, that's 2 image elements stacked on top of each other. It changes the picture on the one below, then fades out the one on top. That's different than using an actual CSS background image. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now