Эффект параллакса CSS?

Я пытаюсь создать простой эффект параллакса с помощью 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%;}