CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.
I’ve used a technique found on this site to implement a full screen, scalable background image. Technique found here:
I used the CSS-Only Technique #1.
It’s working great – but I’d like that image to fade in on page load. Is there a way to accomplish this? Time is of the essence so any help any of you could provide would be greatly appreciated.
This reply has been reported for inappropriate content.
I know it’s not a codepen but here is your answer. http://www.visibilityinherit.com/code/how-to-jQuery-animate.php
Unfortunately you won’t be able to animate the background image itself (at least not in a particularly stable way. You’ll need to create a new `
You could just check with modernizr if js is enabled if it is display none it in your css and then .fadeIn() with jquery onLoad, but this might get a little bit buggy.
@thedoc I’ve never tested that. Have you? I would see do reason that wouldn’t work on the body
@Eric – because if you animated the body, you’d be animating the *entire* page, not just the background.
lol true that
You must be logged in to reply to this topic.
Search for Stuff
Browse the Archives
Get the Newsletter
... or get the RSS feed