How to make HTML/CSS slideshow background fade?

javascript html css background slideshow

50,740

Use this code instead: (note that you'll need to load jQuery in order for this code to work)

HTML

<div class="fadein">
    <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg">
    <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg">
    <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg">
    <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg">
    <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg">
</div>

CSS

.fadein {
    position:relative;
    height:320px;
    width:320px;
}

.fadein img {
    position:absolute;
    left:0;
    top:0;
}

JavaScript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();

setInterval(function () {
    $('.fadein :first-child').fadeOut()
                             .next('img')
                             .fadeIn()
                             .end()
                             .appendTo('.fadein');
}, 4000); // 4 seconds
});
</script>

50,740

Author by

AJ Marshall

Updated on July 09, 2022

Comments

AJ Marshall almost 2 years

I was wondering how you make a background slideshow fade into other photos like a regular slideshow. I've tried many codes and have yet to be successful.

Now, I have a code to make the background change to different photos which works well, but it doesn't fade. Is there anyway to add this?

Here is the code

<html>
<head>

<style>


body{
/*Remove below line to make bgimage NOT fixed*/
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
/*Use center center in place of 300 200 to center bg image*/
background-position: 0 0; background-
}
</style>

<script language="JavaScript1.2">

//Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com

//Specify background images to slide
var bgslides=new Array()
bgslides[0]="http://i892.photobucket.c…

bgslides[1]="http://i892.photobucket.c…

bgslides[2]="http://i892.photobucket.c…

//Specify interval between slide (in miliseconds)
var speed=2000

//preload images
var processed=new Array()
for (i=0;i<bgslides.length;i++){
processed[i]=new Image()
processed[i].src=bgslides[i]
}

var inc=-1

function slideback(){
if (inc<bgslides.length-1)
inc++
else
inc=0
document.body.background=processed[inc…
}

if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",spee…

</script>

</head>

</html>

If you have any suggestions please let me know. Also, I am not the greatest at coding and don't have a clue about JavaScript, so please explain what to do.

Jeff Miller over 11 years

All you need to do is include that block of JavaScript in the code above in your HTML page (at the bottom before the </body). Also, be sure to add the CSS to your stylesheet.
Publicus over 10 years

Great solution htmled! One question though: How could I combine this to work with dynamic width (100%) of the images? I tried updating your jsFiddle, but then the text is placed behind the images. See jsfiddle.net/2kkHH/340
Denilson Sá Maia about 10 years

Doesn't exactly answer your question, but I made CSS-only derivative version at codepen.io/denilsonsa/pen/mpiCj (and see also this question at Reddit)
Kmeixner about 9 years

This doesn't answer the question.
MD Ashik over 7 years

Have any way to add smooth fadein or css animation ?