Css background image from url. transition speed up

so i have a link to a background image that gets replaced with a different link after a certain time (through a script). but before the image transitions to the new one i get a blank space until the new reference is fully loaded.
so my question is if there is any solution to this to make a smooth transition without any blank space in between.
maybe i can cache the content somehow in obsidian to make it load faster ?
the code i use for a background image in obsidian (css snippet):

/background-image:url(https://i.pinimg.com/474x/75/bc/ab/75bcabc0e5ac357628bcf7d24a262f56.jpg);
    background-size: cover;
    background-position:50%;
    transition: background-image 5s ease-in-out;
    z-index: 1;

I’m out on thin ice here, but would put be better/ faster to change the CSS to an already existing file which has been downloaded already?

from what i have read it is not possible to reference a local file in this context. i also tried it and it did not work.