Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Milan Milosevic
Milan Milosevic
6,647 Points

Two background pictures for site ?

So, I know how to put an image to cover my entire page background, but I would like to put two photos to change in the background, like some slider or something, just to have two pics changing periodicaly.

I've put in

body { background: url('image1.jpg'), url ('image2.jpg'); background-size: cover; background-position: center center; background-attachment: fixed; }

But how can I make them to change periodicaly, on ten seconds for example?

Dont know in which topic this question belongs, sorry.

Thanks in advance

2 Answers

Cosmin Cioaclă
Cosmin Cioaclă
21,339 Points
Cosmin Cioaclă
Cosmin Cioaclă
21,339 Points

Hi Milan,

What you are trying to achieve is not possible using CSS alone. The shortest path to your desired outcome is to use a JavaScript library, like jQuery, and let it do the heavy lifting.

This is an example of background color changing after a set timer.

Hope that helps, Cosmin

Milan Milosevic
Milan Milosevic
6,647 Points
Milan Milosevic
Milan Milosevic
6,647 Points

Thanks for answering. I stil havent learned any javascript so it's a bit hard for me to understand, but i'll get onto it soon i hope.

I found this peace of code 

<script>
//Array of images which you want to show: Use path you want.
var images=new Array('img/image1.jpg','img/image2.jpg');
var nextimage=0;
doSlideshow();

function doSlideshow(){
    if(nextimage>=images.length){nextimage=0;}
    $('body')
    .css('background-image','url("'+images[nextimage++]+'")')
    .fadeIn(500,function(){
        setTimeout(doSlideshow,8000);
    });
}
</script>

And it does a job, only thing i dont know is how to make this transition slower, not the interval between transiitions, but the transition process it self. I tried changing this 500 to bigger number, but nothing :S

Cosmin Cioaclă
Cosmin Cioaclă
21,339 Points

Your best bet in these types of situations is to check the documentation. The jQuery API can be found at api.jquery.com.

Indeed, the transition is controlled by the fadeIn method, as you suspected. More info on how that works can be found here. From what I gather, going higher than 500 should have made your transition slower. Please check the docs and see if you missed something.