ポリマー2.0で要素をフルスクリーンにする方法は？

Question

私はPolymer 2.0を完全に新しくしていて、それ以前のバージョンではうまくいきませんでしたので、質問があまりにも愚かであれば私と一緒に裸にしてください。

したがって、my-appという要素があり、bodyとhtmlは100％に設定されています。

内部my-appbackground-sectionと呼ばれる別の要素がbodyおよびhtmlに100％設定されています。そしてこの要素では、私は背景画像を持つセクションを持っています。この背景イメージをフルスクリーンにしたい。

<section class="background-section"> 
 
    <!-- this is another element --> 
 
    <nav-bar></nav-bar> 
 
    
 
    <div class="opening-msg"> 
 
    <div class="app-container"> 
 
     <h1>Find a perfect <br /> property</h1> 
 
     <span class="caption"> 
 
      Connecting landlords & tenants through an easy to <br /> use web 
 
      application built for all devices 
 
     </span> 
 
    </div> 
 
    </div> 
 
</section>

.background-section { 
 
    width: 100%; 
 
    background: linear-gradient(rgba(73, 77, 86, 0), rgb(73, 77, 86)), url('../../images/background-img2.jpg') no-repeat; 
 
    background-size: 100%; 
 
    box-sizing: border-box; 
 
    height: 100%; 
 
}

問題は、画像がフルスクリーンを行っていない何らかの理由で、あります。その理由がわからない

ご了承ください。 HTEは、同じ取得する

おかげ

Answer 1

使用height:100vhとbackground-size: cover;。

body, html {margin:0; padding:0;} 
 

 
.background-section { 
 
    width: 100%; 
 
    background: linear-gradient(rgba(73, 77, 86, 0), rgb(73, 77, 86)), url('https://s-media-cache-ak0.pinimg.com/originals/90/6e/a5/906ea53ecaa5be963e960daf8b645af2.jpg') no-repeat; 
 
    background-size: cover; 
 
    box-sizing: border-box; 
 
    height: 100vh; 
 
}

<section class="background-section"> 
 
    <!-- this is another element --> 
 
    <nav-bar></nav-bar> 
 
    <div class="opening-msg"> 
 
    <div class="app-container"> 
 
     <h1>Find a perfect <br /> property</h1> 
 
     <span class="caption"> 
 
      Connecting landlords & tenants through an easy to <br /> use web 
 
      application built for all devices 
 
     </span> 
 
    </div> 
 
    </div> 
 
</section>