change url background-image

[chani 0 Likes (Newbie)]

hi,

I am trying to replace the background of the DIV with the URL of another image
But between changing the background of one image to another, a black screen was created...
How do I fix this?
It should be noted that I need this through DIV and not through IMG
Thank you for your kind help

 

See the Pen GRBLBdZ by chaniy (@chaniy) on CodePen

[mvaneijgen 1,524 Likes (Superhero)]

1 hour ago, chani said:

But between changing the background of one image to another, a black screen was created...

That is because as soon as you set them, the browser needs to load these images before it can display them. 

 

If you want to animate images I would suggest having all the images already loaded and show/hiding them via an animation.

 

1 hour ago, chani said:

It should be noted that I need this through DIV and not through IMG

Can you explain why that is the case, because there is nothing you can't to with an image that you can with a div and a background-image. Most people gravitate to a background-image because they want to use background-size: cover; but you can do that with an image https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

 

I would suggest laying out your CSS a bit differently instead of having multiple fixed images, but this is a quick example and instead of writhing an animation for each image you can also easily use a stagger. Hope it helps and happy tweening! 

 

See the Pen zYLXyXq?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[iDad5 213 Likes (Specialist)]

Short hint: You can also set more than one background image when using the background property instead of the background-image property. Programmatically removing the topmost (with a class change or direct access to the element.style) might be an option to explore if you are forced to use a background-image.

[RossJohnston 0 Likes (Newbie)]

On 2/7/2023 at 8:38 PM, iDad5 said:

Short hint: You can also set more than one background image when using the background property instead of the background-image property. Programmatically removing the topmost (with a class change or direct access to the element.style) might be an option to explore if you are forced to use a background-image.

Thanks for the help, you made my day :)