Image in one section of website takes up the entire page

I am redesigning a website for fun and I was messing around with some JQuery and some CSS effects. When you click on an arrow, everything on the page gets pushed down and a video comes up. The issues is I'm trying to create a section for an image. However, changing the background-size of the image to cover ends up making the entire image take up the screen. If I manually change the size of the image then the image is distorted. Here is the HTML: <section id="content"> <img src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466799500/background_image_mjh10z.jpg"class="stuff"> </img> <h1>Click the arrow to view Kai Greene's Scar Story</h1> <span class="msg"><button = class="btn btn-danger">Sign up for our News Letter</button></span> </section> <article class="buy"> <h1 class="products text-center">View other products</h1> </article> </div> Here is the CSS: .stuff{ margin-top: 100px; background-soze: cover; position: absolute; left: 0px; top: 0px; z-index: 0; } You can view the entire code on codepen: http://codepen.io/sibraza/pen/wWgqBO