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.
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 <div> that will contain the background image, then you can animate the opacity of the <div>.
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.
I've used a technique found on this site to implement a full screen, scalable background image. Technique found here:
http://css-tricks.com/perfect-full-page-background-image/
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.
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
<div>that will contain the background image, then you can animate the opacity of the<div>.http://codepen.io/ggilmore/pen/hxpEt
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