CODEWITHSUNDEEP
jquerybackgroundjquery-animate
DaveP19
DaveP19

Reputation: 167

Animated background fitting screen

I have a background image on a splash screen that slowly enlarges from 100% to 200% (for no other reason than just to give the page a bit of life). It works fine on horizontal screens as its a horizontal image, but when then screen is narrow (for mobile devices) there is white space top and bottom as the image doesn't fill the background anymore. If I change the background-size to 'cover' then the animation doesn't work correctly (it zooms in from 0% instead of filling the screen).

So my question is - how do I set the initial size to cover so it always fills the screen and then have it slowly enlarge to 200%?

$('.background').animate({
    backgroundSize: "200%"
	}, 40000);
body {
	margin: 0;
	padding: 0;
}

.background {
	width: 100%;
	height: 100vh;
	background-image:url(Front-Cover.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center center;
}
	
.header {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
	
.header img {
	width: 100%;
	height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
	<img src="header.png" alt="">
</div>

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

Upvotes: 0

Views: 84

Answers (1)

Clay
Clay

Reputation: 86

I couldn't get your snippet to work. Give this css a shot, no jquery needed.

.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);}
}

Upvotes: 1

Related Questions