1 Replies - 3385 Views - Last Post: 19 November 2012 - 07:25 PM

#1 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 205
  • View blog
  • Posts: 823
  • Joined: 21-December 11

Full screen parallax background

Posted 17 November 2012 - 11:45 PM

I'm learning how to use the parallax effects using the jParallax jQuery plugin. So far what I have done works fine but I need to make the parallax affect the whole screen. I applied it to the body tag but that doesn't work apparently. Here is how it looks.

Here's the code.

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.parallax.css" />
<style type="text/css">
.parallax-viewport {
    height:20em;
    max-width:60em;
    width:100%;
}
</style>

<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.parallax.js"></script>
<script type="text/javascript" src="js/jquery.event.frame.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $('#parallax .parallax-layer')
    .parallax({
      mouseport: $('#parallax')
    });
});
</script>

</head>

<body id="parallax" class="parallax-viewport">

    <div class="parallax-layer" style="width:600px; height:274px;">
        <img src="images/background_layers/bottom_layer.png" />
    </div>
    <div class="parallax-layer" style="width:1100px; height:284px;">
        <img src="images/background_layers/mid_layer.png" />
    </div>
    <div class="parallax-layer" style="width:1360px; height:320px;">
        <img src="images/background_layers/top_layer.png" />
    </div>

</body>
</html>



How can I fill the whole screen with the parallax background?

I did change the .parallax-viewport class' height from 20em to 100% but that didn't change anything.

Any help would be great! Thanks very much. :)

Is This A Good Question/Topic? 0
  • +

Replies To: Full screen parallax background

#2 BobRodes  Icon User is offline

  • Your Friendly Local Curmudgeon
  • member icon

Reputation: 574
  • View blog
  • Posts: 2,989
  • Joined: 19-May 09

Re: Full screen parallax background

Posted 19 November 2012 - 07:25 PM

You could try adding the classes to the window object maybe?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1