Сделать весь раздел заполнить весь экран

Question

Привет, я пытаюсь создать раздел героя, который имеет ширину и высоту 100%. Я знаю, что на эту тему много вопросов, но никто из них, похоже, не работает для меня. То, что я хочу достичь, - это раздел с изображением и некоторым текстом, который является первым, что видит пользователь. Когда пользователь прокручивает остальную часть веб-сайта, отображается. Когда я запускаю свой код, я получаю белые полосы вокруг изображения, и я попытался установить маркер на гайку 0px, я не работаю. Извините за плохой английский. Это часть моего кода:

HTML:

<section id="hero-section"> 

<h4>Welcome to</h4> 
<h1>ALEX WEIT</h1> 
<a href="#name-section" class="button"></a> 

</section> 
</body> 

CSS:

body, html{ 
height: 100%; 
} 

#hero-section{ 
background-image: url(../Images/Lake.jpg); 
background-size: cover; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-repeat: no-repeat; 
width: 100%; 
height: 100%; 
} 

Скриншот: http://postimg.org/image/qsutt7d6n/

Answer 1

Я испытал здесь, в моем jsfiddle и работал правильно:

HTML, то же самое:

<section id="hero-section"> 

<h4>Welcome to</h4> 
<h1>ALEX WEIT</h1> 
<a href="#name-section" class="button"></a> 

</section> 

Я изменил CSS, фоновое изображение для фона цвет, чтобы проверить и добавить «*» селектор:

* { 
    margin:0; 
} 
body, html { 
    height:100%; 
} 
#hero-section { 
    background-color: red; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 100%; 
} 

Смотрите пример здесь: http://jsfiddle.net/yv3vkqfw/