How to make a background image change on timer

Question

I have a simple full screen background image as shown below:

body { /* The background image used */ background-image: url("../images/bg-one.jpg"); /* Full height */ height: 100vh; width: 100vw; /* Hide scroll */ overflow-x: hidden; overflow-y: hidden; /* Center and scale the background image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; }

I would like to know how I can make the background image change every 5 seconds with a fade in/out transition. Sorry if this seems like a newbie question but I'm just starting out learning Js/Jquery.

My second question would be is it possible to do this using pure CSS3 or would js/jquery work better?

Many thanks, Aidan

Between this stackoverflow.com/questions/34690104/… and this stackoverflow.com/questions/34669608/…, I think you can get fashion a solution. — Marc
– Marc, Commented Aug 24, 2018 at 20:11
Look here for answers to someone else who asked a similar question: CSS3 background image transition — Raptord
– Raptord, Commented Aug 24, 2018 at 20:16
You can't animate background-image (so you can't make fade-in out efect) but you can make 2 elements each over (absolute positioned). Timeout with pure CSS is not possible neither. — Jax-p
– Jax-p, Commented Aug 24, 2018 at 20:55

Jax-p · Accepted Answer · 2018-08-24 21:08:48Z

You can't make fade-in fade-out animation on background-image, because this atribute cannot be animated. Instead of it, you can make 2 fixed elements which are positioned over each other.

You can't make timeout/interval in plain CSS, you'll have to use JS. I've used setInterval function which is switching .active state of two elements, class .active adds to element opacity with transition - example is here: https://jsfiddle.net/2cxmeq7p/

importantaccount1 · Accepted Answer · 2018-08-24 21:28:46Z

I have created a test case for you using jquery: https://codebrace.com/editor/afec3e661

With pure js you may replace jquery with document.body.style.backgroundImage = "url('" + a[i++] + "')";

Test case for background change with fadein/out effect: https://codebrace.com/editor/afef034d6

Collectives™ on Stack Overflow

How to make a background image change on timer

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related