parallax Effext Not Working

Question

Я хочу, чтобы изображение соответствовало элементу контейнера, но мой код показывает только половину изображения без желаемого эффекта параллакса. Может ли кто-нибудь объяснить, почему он не отображает полное изображение?

<header> 
    <div class="top_nav"> 

    </div> 
</header> 
    <div class="container"> 
    <div id="short-des"> 

</div> 
</div> 
<div class=details> 
</div> 

*{ 
    margin: 0; 
    padding: 0; 
} 

.top_nav{ 
    height: 80px; 
    width: 100%; 
    background: rgba(0,0,0,.5); 
    position: absolute; 
} 

.container{ 
    height: 400px; 
    width: 100%; 
    max-width: 100%; 
    overflow: hidden; 
    background-image: url("cover.jpg"); 
    background-attachment: fixed; 
     background-position: center; 
    background-repeat: no-repeat; 
     background-size: cover; 
    z-index: -1; 
} 

.details{ 
    height: 638px; 
    width: 100%; 
    background-color:#00e5de; 

} 

Answer 1

.section1 { 
 
    background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/06/galaxy-wallpapers-10.jpg) no-repeat fixed center; 
 
    width: 100%; 
 
    height: 500px; 
 
} 
 
.section2 { 
 
    background: url(https://hd.unsplash.com/photo-1462121457351-9fb0f5622b72) no-repeat fixed center; 
 
    width: 100%; 
 
    height: 500px; 
 
} 
 
.section3 { 
 
    background: url(https://hd.unsplash.com/photo-1465420961937-e0eba4dda519) no-repeat fixed center; 
 
    width: 100%; 
 
    height: 500px; 
 
}

<div class="section1"></div> 
 
<div class="section2"></div> 
 
<div class="section3"></div>