Search code examples
ioscsssafaribackground-imagefullscreen

Background image not showing full width in Safari as well as iOS

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.enter image description here

/* 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 > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  /*Fade In Animation*/
}


/* Fade in animations */

@keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 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 < 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 > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 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;
}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link href="background.css" rel="stylesheet" type="text/css">
</head>

<body>
  <section class="background">
    <div class="foreground">
      <div class="name-tag">Your Full Name
      </div>
      <ul class="social-media-list">
        <li class="social-media-link">
          <a href="https://twitter.com/"><img src="https://cdn3.iconfinder.com/data/icons/basicolor-reading-writing/24/077_twitter-128.png"></a>
        </li>
        <li class="social-media-link">
          <a href="https://www.youtube.com/"><img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/youtube_circle-128.png"></a>
        </li>
        <li class="social-media-link">
          <a href="https://in.linkedin.com/"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png"></a>
        </li>
        <li class="social-media-link">
          <a href="https://www.instagram.com/"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png"></a>
        </li>
      </ul>
    </div>
  </section>
  <div class="copyright">&copy; Copyright @ 2017</div>
</body>

</html>

Solution

  • Add this to .background:after 

    left:0,
right:0 


    /* 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;
  left:0;
  right:0;
  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 > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  /*Fade In Animation*/
}


/* Fade in animations */

@keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 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 < 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 > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 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;
}
    <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link href="background.css" rel="stylesheet" type="text/css">
</head>

<body>
  <section class="background">
    <div class="foreground">
      <div class="name-tag">Your Full Name
      </div>
      <ul class="social-media-list">
        <li class="social-media-link">
          <a href="https://twitter.com/"><img src="https://cdn3.iconfinder.com/data/icons/basicolor-reading-writing/24/077_twitter-128.png"></a>
        </li>
        <li class="social-media-link">
          <a href="https://www.youtube.com/"><img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/youtube_circle-128.png"></a>
        </li>
        <li class="social-media-link">
          <a href="https://in.linkedin.com/"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png"></a>
        </li>
        <li class="social-media-link">
          <a href="https://www.instagram.com/"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png"></a>
        </li>
      </ul>
    </div>
  </section>
  <div class="copyright">&copy; Copyright @ 2017</div>
</body>

</html>