I don't know why it left that gap of whitespace at the top, but I've created a jsfiddle for you to show what I did to remove it: http://jsfiddle.net/sKzCc/
HTML:
<div id="slider-full-width"> <div class="container"> <h2>Seeking a refreshening management service?</h2> <h2>You've come to the right place</h2> <div id="button-bg"> <a href="properties.html" class="presentation-button">Properties</a> <a href="#body-span-class" class="presentation-button">See why</a> </div>
CSS:
#slider-full-width{ max-width: 100%; min-height:800px; background: url('http://www.wherelionsroam.co.uk/image/two.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position:relative; text-align: center; } #slider-full-width h2 { color: #efefef; margin-top:-20px; font-size: 25.29pt; padding-top: 285px; text-shadow: 1px 1px 1px #000; }
I added in the background-size:cover
tags for all major browsers to ensure maximum cross-browser compatibility.
I hope this solution works for you!