Forums

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

Home Forums JavaScript How to do full-screen responsive background img

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #164788
    esassaman
    Participant

    I ran across a gorgeous new website, http://creativedistrict.com, created by Technicolor. Try going into responsive mode in Firefox or resizing your browser and look at the responsive beauty of that site, I am in love with the technique they are using specifically for that background image and would love to figure out how to do that myself. Unfortuately after wading through the CSS and javascript jungle (looks like they’re using Angular and Foundation among others) I’m at a loss at what the trick is.

    Does anyone know how to create a similar effect for the background – note that it always anchors to the bottom of your browser window and “does the right thing” and looks great no matter what funky height or width your browser is. The bottom-of-window anchoring mode for the background is turned off once you scroll down the page.

    The rest of the landing page looks like standard responsive techniques, it’s just that background technique I can’t figure out. I’m sure it’s mostly javascript doing the heavy lifting magic, with a little sprinkle of the right CSS.

    #164789
    Paulie_D
    Member
    #164816
    esassaman
    Participant

    Thanks for the pointers. Based on that article and some more research, here is something that works quite well for me, that’s a slight variation of the techniques in that article.

    There might possibly be some tweaking to be done with mobile phone orientation changes, viewports, etc. but this at least works fine in all the major desktop browsers.

    See it on Codepen

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