Container background image

Hi there,

you can do it with some CSS.
But the first thing you will need to is to change the Gradient to Pseudo element as we need the elements background.

Then give the container a CSS Class of background-fader.
Then add this CSS to load the second background image and apply an animation to it.

.background-fader {
    background-image: url('full_url_for_second_background_image');
    background-size: cover;
    background-position: 50% 50%;
}

.background-fader:before {
    animation: background-fader infinite 10s;
}

@keyframes background-fader {
    0% {
        opacity: 1;
    }

    11% {
        opacity: 1;
    }

    22% {
        opacity: 1;
    }

    33% {
        opacity: 1;
    }

    44% {
        opacity: 0;
    }

    55% {
        opacity: 0;
    }

    66% {
        opacity: 0;
    }

    77% {
        opacity: 0;
    }

    88% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

That's awesome! Is there a way to add more images, or would i just add more links in the css?

Thanks very much!

Hi,

Can you specify how you want the additional background-images to display?

Do you want the background image to change between a certain set of images?

Let us know.

Hi im just wishing to add maybe one or two more images to the code david supplied if possible, and for them to shuffle through 4 images with the animation supplied above too, i tried seperating the urls like this in css, but didnt work

url("image.link"),
url("image.link"),;

Although a Container can have multiple background images applied to it, it's not possible to apply CSS animations to each background layer.

To do this would require Custom HTML inside the Container.
Heres an example of a code pen to do that:

https://codepen.io/klesht/pen/vEOjrz

But its going to be tricky to add that to your Container when you have background gradient and the content is placed in front with a higher z-index..... in fact its probably impossible, as you would need the slideshow to be positioned relative to the container, which it can't be as the inner container has relative positioning....

Oh ok i thought i could be cheeky and just add a couple more image links haha, if its impossible thanks anyway the code you provided makes two images flicker nicely. Hopefully in future will be a way to do what i require,

Thanks guys..

Glad to be of help