Tam ekran BG, ilk iniş ekranı üzerinde kaydırma divs

Question

Kodlama konusunda oldukça yeni oldum, bu yüzden lütfen herhangi bir basit hataya izin verin. Buna bakmayı denedim ama aradığım şey için tam bir çözüm bulamadım.

Temel olarak, istediğim, açılış sayfası için tam ekran arka planıdır. Bu açılış sayfasında, başlık/intro için dikey olarak & yatay olarak ortalanmış div'um var. Aşağı kaydırdığımda, tüm ekran genişliğine uyan ve esas olarak arka plan üzerinde kayan ve başlığı da yukarı taşıyan beyaz bir div istiyorum.

İşte ben bugüne kadar ne var: Esasen

html,body{ 
 
\t height: 100%; 
 
} 
 

 
body{ 
 
\t font-family: 'American Typewriter', serif; 
 
\t font-weight: lighter; 
 
    background: url('https://upload.wikimedia.org/wikipedia/commons/8/83/An_old_barn_with_the_Big_Horn_Mountains_in_the_background._Not_far_from_Sheridan,_Wyoming.JPG') no-repeat 50% 50%; 
 
background-size: cover; 
 
-moz-background-size: cover; 
 
-o-background-size: cover; 
 
-webkit-background-size: cover; 
 
} 
 

 
div.name{ 
 
\t font-size:100px; 
 
\t color: #fff; 
 
display: block; 
 
margin: 0 auto; 
 
} 
 

 
div.container-intro{ 
 
height:100%; 
 
width:100%; 
 
display: table; 
 
margin: auto; 
 

 
} 
 

 
div.container-inner{ 
 
text-align: center; 
 
vertical-align:middle; 
 
display: table-cell; 
 
} 
 

 
a.main-link{ 
 
\t border: 3px solid #fff; 
 
\t padding:5px; 
 
\t color: #fff; 
 
\t font-size: 20px; 
 
\t text-decoration: none; 
 
\t width:fixed; 
 
} 
 

 

 
div.big-white{ 
 
\t background-color: #fff; 
 
\t width: 100%; 
 
\t margin:auto; 
 
\t 
 
}

<div class="container-intro"> 
 
\t <div class="container-inner"> 
 
<div class="name">title</div> 
 
<div class="col-md-6 col-md-offset-3"> 
 
\t 
 
<a class="main-link col-md-4 col-md-offset-1" href="#">link</a> 
 
<a class="main-link col-md-4 col-md-offset-1" href="#">link</a> 
 
</div> 
 
</div> 
 
</div> 
 
<div class="row"> 
 
<div class="big-white col-md-12"> 
 
\t Hello 
 
</div> 
 
</div>

, "büyük beyaz" ilk div'leri yukarı iterek,% 100 genişlik olacak ve bg üzerinde ilerlemek gerekiyordu. Ben

Answer 1

elemnt gövde marjı 0px.

body{ 
    margin:0px; 
    font-family: 'American Typewriter', serif; 
    font-weight: lighter; 
    background: url('https://foo.bar/img.JPG') no-repeat 50% 50% fixed; 
    background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    -webkit-background-size: cover; 
} 

Answer 2

sizin css vücuda background-repeat özelliğini ekleyin .. bu iyi izah edilmez üzgünüm Doğru istediğini, sadece CSS ve sette size arka plana fixed eklemek anlasalardı

body{ 
    ... 
    background-repeat: no-repeat; 
}