Grow your CSS skills. Land your dream job.

Full Screen Scalable Background Image That Fades In On Load

  • # January 4, 2013 at 7:35 pm

    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.

    # January 4, 2013 at 8:31 pm

    I know it’s not a codepen but here is your answer. http://www.visibilityinherit.com/code/how-to-jQuery-animate.php

    # January 4, 2013 at 9:26 pm

    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 `

    ` that will contain the background image, then you can animate the opacity of the `
    # January 4, 2013 at 10:01 pm

    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.

    # January 4, 2013 at 11:53 pm

    @thedoc I’ve never tested that. Have you? I would see do reason that wouldn’t work on the body

    # January 5, 2013 at 2:47 am

    @Eric – because if you animated the body, you’d be animating the *entire* page, not just the background.

    # January 5, 2013 at 9:33 am

    lol true that

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".