<!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
/* Basic background image styling. */
.background-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Styles for the alternating / transition effect. */
.toggle-image {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    transition: opacity 1s ease-in-out;
}


/* Styles for the specific images. */
.first-image {
    background-image: url('http://www.htmlfreecode.com/files/background69a.jpg');
    z-index: -3;
    opacity: 0;
}

.second-image {
    background-image: url('http://www.htmlfreecode.com/files/background69b.jpg');
    z-index: -2;
    opacity: 0;
}

.third-image {
    background-image: url('http://www.htmlfreecode.com/files/files/background69c.jpg');
    z-index: -1;
    opacity: 0;
}

.first-image.show {
    opacity: 1;
}

.second-image.show {
    opacity: 1;
}

.third-image.show {
    opacity: 1;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<div class="background-image toggle-image first-image show"></div>
<div class="background-image toggle-image second-image"></div>
<div class="background-image toggle-image third-image"></div>
<script>
function cycleBackgrounds() {
    var index = 0;

    $imageEls = $('.toggle-image'); // Get the images to be cycled.

    setInterval(function () {
    // Get the next index.  If at end, restart to the beginning.
    index = index + 1 < $imageEls.length ? index + 1 : 0;
    // Show the next image.
    $imageEls.eq(index).addClass('show');
    // Hide the previous image.
    $imageEls.eq(index - 1).removeClass('show');

    }, 2000);
};

// Document Ready.
$(function () {
    cycleBackgrounds();
});
</script><a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>