Image background already changing, can I fit it to browser window and make fade in and out

Question

Hello below is my JS code for a changing background image every 30 seconds. could somebody please advise me if there is a way to alter the code to fit the image to the browser window (100%) and also if there is any JS that I could use within this code to make the images fade in and out seemlessly and elegantly.

<script>
bgArr = ['images/bg1.jpg', 'images/bg2.jpg', 'images/bg3.jpg'];
bgCur = 0;
backgroundSwitch = function()
{
if (bgCur == bgArr.length) bgCur = 0;
document.body.style.backgroundImage = 'url('+ bgArr[bgCur++]+ ')';
}
window.setInterval(backgroundSwitch, 30000); // Switch every 30 seconds.
</script>

Thank you everybody

Answer 1

CSS3 introduced background-size: cover. This automatically sizes the background image to cover the entire parent element, either scaling it horizontally or vertically to fill.

See the entry on MDN.

background-size is supported by all major browsers.

Answer 2

Fitting to browser window should be simple enough. Depending on your browser requirements, you might be able to get away with background-size: cover in your CSS (see Albert's answer).

As for animating, you could either use CSS transitions and trigger them via JavaScript (generally by modifying the class) or use JavaScript to do it.

If using JavaScript, be sure to set a duration and then lerp (or some other method) between the states.

This is the general idea...

var img = document.getElementById("fade");

var fadeLength = 5500;
var opacity = 0;
var startTime = Date.now();

requestAnimationFrame(function me() { 
    // It's faded in, stop animating!
    if (opacity >= 1) {
       return;   
    }

    opacity = (Date.now() - startTime) / fadeLength;
    img.textContent = opacity;    
    img.style.opacity = opacity;        
    requestAnimationFrame(me);
});

jsFiddle.