Full Screen Image with Text/Button (Responsive)

Question

I am working on a sophisticated project for a client. I have designed a full screen landing page will need to be compatible across all sized windows/mobile (responsive). Currently I cannot target the image to cover the entire page. The div (slider-full-width) needs to span the entire window. I have supplied an image to demonstrate what I am trying to achieve. I am using the Skeleton Framework. http://www.getskeleton.com/ You must be able to keep scrolling down to see the rest of the page content after this full screen landing page.

My 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>

My CSS:

    #slider-full-width{
width: 100%;
background-image: url('../img/slide-01.jpg');
position:relative;
text-align: center;}
    #slider-full-width h2 {
color: #efefef;

}

Thank you so much in advance!

Answer 1

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!

Answer 2

If you are looking to have the background image cover the div you could use this in your selector:

#slider-full-width {
    /* Your code */
    background-size: cover;
}