Grow your CSS skills. Land your dream job.

Help with cool effect using Javascript and background fixed!

  • # February 12, 2013 at 6:36 pm

    I would like to know how to get the effect on this site:

    [http://www.pickledwalnutcatering.co.uk/](http://www.pickledwalnutcatering.co.uk/ “”)

    Thanks!

    # February 12, 2013 at 6:44 pm

    Something like [this](http://codepen.io/rosspenman/pen/iuldA)?

    Note: I used Sass for this. To see the CSS, click the Sass text at the top of the text box on CodePen.

    # February 12, 2013 at 7:38 pm

    Hey Rosspenman, thanks for sharing that code…This is the effect I wanted but I was wondering if there was a javascript code to have each div automatically scale 100% height of the window depending on the screen size.

    # February 12, 2013 at 7:42 pm

    That’s CSS as well, `background-size: cover;`

    Edit: nevermind, I need sleep… that is JavaScript indeed.

    See http://www.pickledwalnutcatering.co.uk/resources/js/script.js , the resizingStuff function is what you need, bind to load and resize events.

    # February 12, 2013 at 8:19 pm

    Hey, I took rosspenman’s code and elaborated on it with some jquery I found online…here is the end result that I was looking for:

    http://jsfiddle.net/mdyorke/XyKA6/1/

    Thanks for the help!

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

You must be logged in to reply to this topic.

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