애니메이션 배경 피팅 화면

Question

스플래시 화면에 100 %에서 200 %까지 천천히 확대되는 배경 이미지가 있습니다 (페이지에 약간의 생명을 부여하는 것보다). 수평 이미지는 수평 이미지처럼 잘 작동하지만 화면이 좁은 경우 (모바일 장치의 경우) 이미지가 배경을 더 이상 채우지 않으므로 흰색 위쪽과 아래쪽이 있습니다. 배경 크기를 '표지'로 변경하면 애니메이션이 제대로 작동하지 않습니다 (화면을 채우지 않고 0 %로 확대).

그럼 내 질문은 - 화면에 항상 채워지도록 초기 크기를 설정하고 천천히 200 %까지 확대하도록하는 방법입니다.

$('.background').animate({ 
 
    backgroundSize: "200%" 
 
\t }, 40000);

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
.background { 
 
\t width: 100%; 
 
\t height: 100vh; 
 
\t background-image:url(Front-Cover.jpg); 
 
\t background-size: 100%; 
 
\t background-repeat: no-repeat; 
 
\t background-position: center center; 
 
} 
 
\t 
 
.header { 
 
\t width: 100%; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
} 
 
\t 
 
.header img { 
 
\t width: 100%; 
 
\t height: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 
\t <img src="header.png" alt=""> 
 
</div> 
 

 
<div class="background"></div>

Answer 1

나는 당신의 조각은 동작하지 않습니다 수 있습니다. 이 CSS를 쏜다. jquery는 필요 없다.

.background { 
     width:100%; 
     height:100%; 
     background-image:url(Front-Cover.jpg); 
     background-position: center; 
     background-size: cover; 
     animation: 5s ease example infinite; 
} 

@keyframes example { 
    0% { transform: scale(1);} 
    50% { transform: scale(2);} 
    0% { transform: scale(1);} 
} 

@keyframes example { 
    0% { -webkit-transition: scale(1);} 
    50% { -webkit-transition: scale(2);} 
    0% { -webkit-transition: scale(1);} 
} 
    @keyframes example { 
    0% { -moz-transition: scale(1);} 
    50% { -moz-transition: scale(2);} 
    0% { -moz-transition: scale(1);} 
}