css を使用して単純な視差効果を作成しようとしています。探している効果を作成する次のコードがありますが、画像をズームインしているように見えるため、画像の半分が隅で切り取られています。画像の実際のサイズを維持するように、持っているものを修正するにはどうすればよいですか?
<div id="slide4" class="slide" data-stellar-background-ratio="0" data-slide="4"> </div>
<div id="slide2" class="slide" data-stellar-background-ratio="0.5" data-slide="2"> </div>
#slide4 {background-image: url("http://2.bp.blogspot.com/-m95Wunj4M-g/T8zFSAFdh4I/AAAAAAAAEhg/y9W8e-Iu4WQ/s1600/Flower-wallpaper-32.jpg");
background-size: contain;
float: left;
margin-top:20px;
height: 450px;}
.slide {background-attachment: fixed;
height: 100%;
position: inherit;
width: 100%;}