Background Crossfade

Question

I am working on a website (early stages) and I'm having severe difficulties applying a background crossfade in the white-background area (I would like to have a few images auto-rotating on the background, completely filling it).

As per the HTML code, I should be fine working with class .main-container in the CSS however, this changes nothing...

I would sincerely appreciate your help, I'm self-taught in HTML+CSS and I just need guidance for the right steps to take.

What would you recommend?

Many thanks in advance!

(update)

I decided to go for the Tympanus.net solution.

Which has been badly implemented to http://www.marcocarlo.com/mimosa/index.html

Here's the CSS code:

.cb-slideshow,
.cb-slideshow:after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.cb-slideshow:after {
    content: '';
    background: transparent url(images/pattern.png) repeat top left;
    background-size:cover; 
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 18s linear infinite 0s;
    -moz-animation: titleAnimation 18s linear infinite 0s;
    -o-animation: titleAnimation 18s linear infinite 0s;
    -ms-animation: titleAnimation 18s linear infinite 0s;
    animation: titleAnimation 18s linear infinite 0s; 
}

What can I do so it is on display in the white background area (fully covering it?)

Many thanks in advance!

Answer 1

You can try looking for some existing guides. Or maybe look for some existing image sliders with crossfade transitions. If you are willing to write your own crossfade though, you can use background-size: cover to fill entire areas (example)