How can I prevent flicker in a reactive background image change?


I have a div whose background image changes depending on a helper’s return. Right now when there is a change it goes white for a millisecond or so and then shows the new image. How can I make the image transition more pleasing?

(If I were changing the image on click, instead of as a result of a helper’s return, then I would do a jquery fadeIn or something like that.)


What UI framework are you using? Vue? React? Blaze?


Also, this should work with CSS:

transition: background-image 1s ease-in-out;

But you’ll have control by handling it directly in your UI framework


I’m using the Blaze framework.


Cool, didn’t know you could actually transition background images that simply! :grinning:


Take a look at here. It’s always amazing what you can do with CSS3. I’m not sure if Edge and others do support those transition, thought.

@webmagnets does that solve your problem?


I put this in main.html

	body {
		transition: background-image 1s ease-in-out;

It doesn’t seem to be working like what you linked to.

It still transitions abruptly.


It is working now with:

div.cover {
			background: url({{backgroundImgSrc}}) no-repeat center center fixed;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			transition: background-image 1s ease-in-out;



What you’ve done there is add a transition to the background of <body>, not the div.
I made a fiddle to test it myself :slight_smile: