jParallax jQuery プラグインを使用して視差効果を使用する方法を学習しています。これまでのところ、私が行ったことはうまくいきますが、視差を画面全体に影響させる必要があります。body タグに適用しましたが、どうやらうまくいきません。これがその外観です。
これがコードです。
<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>
画面全体を視差背景で埋めるにはどうすればよいですか?