How to have an image zoom in and out automatically

Question

I have a background image set in HTML, using CSS, the image is a full size background image, covering all of the web page. What I'd like to do is have the image zoom in and out automatically in the backround without any user interaction.

Here's a gif explaining what I'd like to achieve;

Image Link: (As it is a .gif)

Any ideas on how I would do this? I'm imagining it would be some sort of JQuery Plugin, I'm not the greatest at JQuery though so any and all help would be greatly appreciated!

Thanks!

Answer 1

First of all, please don't do this, it's a sure fire way of driving people away from your site!

Having said that, you can achieve what you're looking to do with CSS alone, without any JavaScript, by applying an animation to the background-size property of your body tag (or whichever element you're using), like so:

body{
    -webkit-animation:zoom 5s infinite;
    animation:zoom 5s infinite;
    background:url(https://picsum.photos/1900/1900/?random) center center fixed no-repeat;
}
@-webkit-keyframes zoom{
    0%,100%{
        background-size:100%;
    }
    50%{
        background-size:125%;
    }
}
@keyframes zoom{
    0%, 100%{
        background-size:100%;
    }
    50%{
        background-size:125%;
    }
}

You can tweak the animation settings to suit your needs and you may also need to use more vendor prefixes than I've provided, depending on the level of browser support you're aiming for. See caniuse.com for browser compatibility tables.