0
フルスクリーンで背景画像を追加しました。 ChromeとFirefoxでうまく動作します。しかしSafariでは、背景画像はフルスクリーンではなく、切り取って見えます.MacのSafariやiOS（iPad/iPhone）にも同じ症状が当てはまります。 Safariでは、ビューは次のようになります。 
SafariとiOSで背景画像に幅が表示されない
/* 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">© Copyright @ 2017</div>
</body>
</html>
にこれを追加します。乾杯@anoopda –