How to resize background image with CSS/JS

I have fullscreen website with background-image: no-repeat and background-size: cover style on it. I want to make animation that the background image will resize in 10 second to the right side of the page to 350px width and 175px height. It's even possible to do it?

background-image: no-repeat

background-size: cover

350px

175px

body
background-image: url(/image.png);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;



I saw some webkit animation but there was problem with the background-size: cover style, so the animation doesn't work.

background-size: cover

I tried :

$(function()
$('body').one("mouseover", function()
$('body').addClass('hover');
);


);

But it will resize the image instantly and move it to the right, I want to resize them linear.

Thank you very much guys! :-)

2 Answers
2

You could add something like this to your css:

body
background-position: center center;
transition: background-size 10s ease-in-out, background-position 10s ease-in-out;


body.hover
background-size: 350px 170px;
background-position: right center;



https://codepen.io/anon/pen/oPbqPm

The problem with this, is however, that it won't animate the sizing.

I would suggest you don't set the image as background. Instead, position the image behind all other elements using position and z-index properties. Once set, you can add the animation. For more details on using z-index and position attributes see the link below and "try it yourself" example:-

https://www.w3schools.com/cssref/pr_pos_z-index.aspenter link description here

You can then use css animation for resizing of the imgae.

TO learn how to add animation see this link:-
https://www.w3schools.com/css/css3_animations.asp

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.