JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法

[html]
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法</title>

<style>
/*Styles 今回は、ここにCSSを記述します。*/
</style>

</head>
<body>

<div class="image">
<h2>JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法</h2>
</div>

<section class="content">
<!–ここにコンテンツが入ります–>
</section>

</body>
</html>
[/html]

[css]
body {
margin:0;
padding:0;
border:0;
}
.image {
background: url(‘images/tumblr_n381qgQRTS1st5lhmo1_1280.jpg’) no-repeat fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 500px;
}
h2 {
color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 60px;
text-align:center;
font-weight: bold;
letter-spacing: -1px;
margin: 0 auto;
width: 800px;
position: fixed;
top: 30%;
left: 50%;
margin-top: -200px;
margin-left: -400px;
opacity:0.8;
}
.content {
width: 100%;
max-width: 750px;
margin: 0 auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
z-index: 2;
background: #FFF;
width: 100%;
}
p {
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 22px;
line-height: 40px;
margin: 30px 0;
}
[/css]