Изображение в полноэкранном режиме с текстом/кнопкой (отзывчивое)

Question

Я работаю над сложным проектом для клиента. Я разработал целевую страницу с полным экраном, которая должна быть совместима со всеми размерами окон/мобильных устройств (отзывчивыми). В настоящее время я не могу настроить таргетинг на изображение, чтобы охватить всю страницу. Ползунок div (ползунок полный) должен охватывать все окно. Я поставил изображение, чтобы продемонстрировать, чего я пытаюсь достичь. Я использую Skeleton Framework. http://www.getskeleton.com/ Вы должны быть в состоянии продолжать прокрутку вниз, чтобы увидеть остальную часть содержимого страницы после этой целевой страницы полного экрана.

Мой 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{ 
width: 100%; 
background-image: url('../img/slide-01.jpg'); 
position:relative; 
text-align: center;} 
    #slider-full-width h2 { 
color: #efefef; 

}

Большое спасибо заранее!

Answer 1

Я не знаю, почему он покинул этот пробел пробел в верхней части, но я ве создали jsfiddle для вас, чтобы показать, что я сделал, чтобы удалить его: 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; } 

Я добавил в background-size:cover теги для всех основных браузеров, чтобы обеспечить максимальную совместимость с различными браузерами. Я надеюсь, что это решение будет работать для вас!

Answer 2

Если вы хотите иметь фоновое изображение покрытия DIV вы могли бы использовать это в селекторе:

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