Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Full Screen Scalable Background Image That Fades In On Load

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #41760

    I’ve used a technique found on this site to implement a full screen, scalable background image. Technique found here:

    https://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.

    #119870
    TheDoc
    Member

    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 `

    #119869
    EkingRDL
    Member

    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.

    #119882
    TheDoc
    Member

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.