title: Background image not showing full width in Safari as well as iOS
body: <p>I had added a background image as fullscreen. It works fine with Chrome and Firefox. But in Safari , the background image is not full screen but looks cropped.The same symptom applies with Safari on my Mac – as well as iOS (iPad/iPhone). 
   The view looks like this in Safari.<a href="https://i.stack.imgur.com/1G9WW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1G9WW.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Body Margin*/
  
  body {
    margin: 0;
  }
  
  
  /*  Font family avenir-light*/
  
  @font-face {
    font-family: 'avenir-light';
    src: url('fonts/avenir-light.eot') format('eot'), url('fonts/avenir-light.woff') format('woff'), url('fonts/avenir-light.ttf') format('ttf');
  }
  
  
  /* Background Div*/
  
  .background {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: -webkit-flex;
    /* Safari */
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    /* Safari 6.1+ */
  }
  
  
  /* Background Div: after*/
  
  .background:after {
    position: absolute;
    width: 100vw;
    height: 100vh;
    content: '';
    background: url("https://www.ncl.com/sites/default/files/DestinationGalleries.Hawaii.SnorkelingBay900x400.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #999;
    -webkit-animation: fadein 10s;
    /* Safari, Chrome and Opera &gt; 12.1 */
    -moz-animation: fadein 10s;
    /* Firefox &lt; 16 */
    -ms-animation: fadein 10s;
    /* Internet Explorer */
    -o-animation: fadein 10s;
    /* Opera &lt; 12.1 */
    animation: fadein 10s;
    /*Fade In Animation*/
  }
  
  
  /* Fade in animations */
  
  @keyframes fadein {
    from {
      opacity: 0.2;
    }
    to {
      opacity: 1;
    }
  }
  
  
  /* Firefox &lt; 16 */
  
  @-moz-keyframes fadein {
    from {
      opacity: 0.2;
    }
    to {
      opacity: 1;
    }
  }
  
  
  /* Safari, Chrome and Opera &gt; 12.1 */
  
  @-webkit-keyframes fadein {
    from {
      opacity: 0.2;
    }
    to {
      opacity: 1;
    }
  }
  
  
  /* Internet Explorer */
  
  @-ms-keyframes fadein {
    from {
      opacity: 0.2;
    }
    to {
      opacity: 1;
    }
  }
  
  
  /* Opera &lt; 12.1 */
  
  @-o-keyframes fadein {
    opacity: 0.2;
  }
  
  to {
    opacity: 1;
  }
  
  
  /* Foregraound div */
  
  .foreground {
    margin-top: 20px;
    position: relative;
    width: 400px;
    height: 100px;
    background-color: #eaeaea;
    padding: 20px;
    border: 1px solid #555;
    border-radius: 10px;
    /*Fade In Animation*/
    -webkit-animation: fadein 10s;
    /* Safari, Chrome and Opera &gt; 12.1 */
    -moz-animation: fadein 10s;
    /* Firefox &lt; 16 */
    -ms-animation: fadein 10s;
    /* Internet Explorer */
    -o-animation: fadein 10s;
    /* Opera &lt; 12.1 */
    animation: fadein 10s;
    z-index: 1;
  }
  
  
  /* Name Tag */
  
  .name-tag {
    font-family: 'avenir-light';
    text-align: center;
    font-size: 24px;
  }
  
  
  /* Socail Media List*/
  
  .social-media-list {
    list-style: none;
    display: -webkit-flex;
    /* Safari */
    display: flex;
    -webkit-justify-content: space-around;
    /* Safari 6.1+ */
    justify-content: space-around;
    padding: 0;
  }
  
  
  /* Socail Media Item*/
  
  .social-media-link img {
    height: 50px;
    width: 50px;
    transition: all 0.5s ease;
  }
  
  .social-media-link img:hover {
    -ms-transform: scale(1.2);
    /* IE 9 */
    -webkit-transform: scale(1.2);
    /* Safari */
    transform: scale(1.2);
    /* Standard syntax */
  }
  
  
  /* Copyright*/
  
  .copyright {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 20px;
    color: #ccc;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link href="background.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;section class="background"&gt;
      &lt;div class="foreground"&gt;
        &lt;div class="name-tag"&gt;Your Full Name
        &lt;/div&gt;
        &lt;ul class="social-media-list"&gt;
          &lt;li class="social-media-link"&gt;
            &lt;a href="https://twitter.com/"&gt;&lt;img src="https://cdn3.iconfinder.com/data/icons/basicolor-reading-writing/24/077_twitter-128.png"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="social-media-link"&gt;
            &lt;a href="https://www.youtube.com/"&gt;&lt;img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/youtube_circle-128.png"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="social-media-link"&gt;
            &lt;a href="https://in.linkedin.com/"&gt;&lt;img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="social-media-link"&gt;
            &lt;a href="https://www.instagram.com/"&gt;&lt;img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png"&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;div class="copyright"&gt;&amp;copy; Copyright @ 2017&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>