title: How to fit the background to the whole iPhoneX screen including the notch
body: <p>I am a new to html and css.
  Recently. I am writing a login page for iphoneX, but the background won't cover the entire screen. 
  I tried the following methods, but didn't work</p>
  
  <pre><code>viewport-fit=cover
  padding-left: env(safe-area-inset-left); 
  padding-right: env(safe-area-inset-right);
  </code></pre>
  
  <p>None of them work, it still leaves a white area on the top as shown in the picture.
  How can I make the background cover the entire page including the top-left and top-right corner on the iPhoneX or the later versions?</p>
  
  <p>Appreciate if anyone who could help me.</p>
  
  <p><a href="https://i.stack.imgur.com/CuZPx.jpg" rel="nofollow noreferrer">enter image description here</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"/&gt;
      &lt;title&gt;登陆页面&lt;/title&gt;
      &lt;script src="js/mui.min.js"&gt;&lt;/script&gt;
      &lt;link href="css/mui.min.css" rel="stylesheet"/&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
      &lt;script type="text/javascript" charset="utf-8"&gt;
          mui.init();
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;style type="text/css"&gt;
      body{
          font-family: "Source Han Sans CN";
          background-color: #22222;
          overflow-x:hidden;
          overflow-y:hidden;
          padding-left: env(safe-area-inset-left);
  
          padding-right: env(safe-area-inset-right);
      }
  
      /*以下为背景装饰*/
      .middle-image {
          margin: 10vh auto 0 auto;
          text-align: center;
      }
  
      #girl {
          width: 30vh;
      }
  
  
      .circlex {
          background: #fdd100;
          position: fixed;
          overflow: hidden;
      }
  
      #circle2 {
          left: -5vh;
          top: -10vh;
          width: 18vh;
          height: 18vh;
          -moz-border-radius: 10vh;
          -webkit-border-radius: 10vh;
          border-radius:10vh;
      }
  
      #circle3 {
          left: -24vh;
          top: 0.5vh;
          width: 30vh;
          height: 30vh;
          -moz-border-radius: 24vh;
          -webkit-border-radius: 24vh;
          border-radius:24vh;
      }
  
      #circle4 {
          right: -5vh;
          top: -6vh;
          width: 18vh;
          height: 18vh;
          -moz-border-radius: 10vh;
          -webkit-border-radius: 10vh;
          border-radius:10vh;
      }
  
      #circle5 {
          right: -12vh;
          top: 4.5vh;
          width: 18vh;
          height: 18vh;
          -moz-border-radius: 10vh;
          -webkit-border-radius: 10vh;
          border-radius:10vh;
      }
  
      #circle6 {
          right: -11vh;
          bottom: 4.5vh;
          width: 15vh;
          height: 15vh;
          -moz-border-radius: 10vh;
          -webkit-border-radius: 10vh;
          border-radius:10vh;
      }
  
      #circle7 {
          right: -8vh;
          bottom: -8vh;
          width: 18vh;
          height: 18vh;
          -moz-border-radius: 10vh;
          -webkit-border-radius: 10vh;
          border-radius:10vh;
      }
  
      #circle8 {
          left: -2vh;
          bottom: -10vh;
          width: 18vh;
          height: 18vh;
          -moz-border-radius: 10vh;
          -webkit-border-radius: 10vh;
          border-radius:10vh;
      }
  
      #circle9 {
          left: -13vh;
          bottom: -1vh;
          width: 18vh;
          height: 18vh;
          -moz-border-radius: 10vh;
          -webkit-border-radius: 10vh;
          border-radius:10vh;
      }
  
      /*以下为内容区域，包括所有文字性内容*/
      .main_title {
          position: relative;
          margin: 6vh auto 5.76vh auto;
          text-align: center;
      }
  
      .circle {
          width: 1vh;
          height: 1vh;
          background: #fdd100;
          -moz-border-radius: 8vh;
          -webkit-border-radius: 8vh;
          border-radius: 8vh;
          margin: 1.44vh;
      }
  
      .main_title ul{
          width: 90%;
          list-style: none;
          display: flex;
          justify-content: center; 
          align-items: center;
      }
  
      .main_title a{
          color: #FDD100;
          font-size: 6vw;
      }
  
      .textbox {
          align-items: center;
          text-align: center;
          border-bottom: 0.12vh solid #CDCDCD;
          display: flex;
          width: 80%;
          margin: 1.2vh auto 0 auto;
      }
  
      .textbox input {
          border-style: none;
          outline: none;
          background: none;
          font-size: 3vw;
          color: #CDCDCD;
          margin: 0 auto;
          float: left;
  
      }
  
      #password::-webkit-input-placeholder {
          color: #cdcdcd;
      }
  
      #account::-webkit-input-placeholder {
          color: #cdcdcd;
      }
  
      i {
          color: #cdcdcd;
      }
  
      .btn {
          width: 80%;
          height: 6vh;
          background: #fdd100;
          border-radius: 4.8vh;
          border-style: none;
          color: #4b4a48;
          font-size: 4vw;
      }
  
      .btn-container {
          margin: 2.9vh auto 0vh auto;
          text-align: center;
      }
  
      .noaccount {
          border:0.12vh solid red;
          width: 80%;
          margin: 1.2vh auto 0vh auto;
          display: flex;
          text-align: center;
      }
  
      .link-area {
          display: block;
          margin-top: 3vh;
          text-align: center;
          align-items: center;
      }
  
      .link-area a{
          color: #cdcdcd;
          font-size: 3vw;
          font-weight: 200;
      }
  
      .spliter {
          color: #fdd100;
          padding: 0vh 1vh;
      }
  
      #logo {
          text-align: center;
          margin: 6vh auto 3.5vh auto;
      }
  
      #logo img{
          width: 7.2vh;
      }
  &lt;/style&gt;
  
  
  &lt;body&gt;
      &lt;div class="middle-image"&gt;
          &lt;img src="img/undraw_unlock_24mb.svg" id="girl"&gt;
      &lt;/div&gt;
  
      &lt;div class="circle_container"&gt;
          &lt;div id="circle2" class="circlex"&gt;&lt;/div&gt;
          &lt;div id="circle3" class="circlex"&gt;&lt;/div&gt;
          &lt;div id="circle4" class="circlex"&gt;&lt;/div&gt;
          &lt;div id="circle5" class="circlex"&gt;&lt;/div&gt;
          &lt;div id="circle6" class="circlex"&gt;&lt;/div&gt;
          &lt;div id="circle7" class="circlex"&gt;&lt;/div&gt;
          &lt;div id="circle8" class="circlex"&gt;&lt;/div&gt;
          &lt;div id="circle9" class="circlex"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="main_title"&gt;
          &lt;ul&gt;
              &lt;div id="ufun"&gt;&lt;li&gt;&lt;a&gt;Ufun&lt;/a&gt;&lt;/li&gt;&lt;/div&gt;
              &lt;div id="circle1" class="circle"&gt;&lt;/div&gt;
              &lt;div id="discover"&gt;&lt;li&gt;&lt;a&gt;text&lt;/a&gt;&lt;/li&gt;&lt;/div&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="form"&gt;
          &lt;div class="textbox"&gt;
              &lt;i class="material-icons"&gt;account_circle&lt;/i&gt;
              &lt;input id="account" type="tel" class="mui-input-clear mui-input" placeholder="Phone"&gt;
          &lt;/div&gt;
  
          &lt;div class="textbox"&gt;
              &lt;i class="material-icons"&gt;lock&lt;/i&gt;
              &lt;input id="password" type="password" class="mui-input-clear mui-input" placeholder="Password"&gt;
          &lt;/div&gt;
  
          &lt;div class="btn-container"&gt;
              &lt;button type="button" class="btn" href="#"&gt;login&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div class="mui-content-padded"&gt;
              &lt;div class="link-area"&gt;
                  &lt;a id='reg' href="#"&gt;register&lt;/a&gt;
                  &lt;span class="spliter"&gt;|&lt;/span&gt;
                  &lt;a id='forgetPassword' href="#"&gt;fotget&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="logo"&gt;
              &lt;img src="img/logo.png"&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>