One div as background of fullScreen

Question

I am developing one page. Inside the page I want to have background images which these images one by one should fadein and fadeOut after each other.

I am controlling this process with jQuery function, but I have another problem that, how can I put one div (div contains images) to be my background?

I want that div layout would be my background and then using that jQuery change them.

 $(document).ready(function(){ // run every 7s raiseToSunrise(1000) }); function raiseToSunrise(interval) { var num = 1; var theinterval = setInterval(function() { var $active = $('#wrapper .active'); console.log($active); //var $next = ($active.next().length > 0) ? $active.next() : $('#layout img:first'); var $next = $active.next(); $next.css('z-index',1);//move the next image up the pile $active.fadeOut(8000,function(){//fade out the top image $active.css('z-index',0).show().removeClass('active');//reset the z-index and unhide the image $next.css('z-index',2).addClass('active');//make the next image the top one }); num = num+1; if (num == 4) { clearInterval(theinterval); return; } }, interval); } 

 #layout { position: absolute; z-index:-1; height:10%; } #layout img { position: absolute; z-index:0; } #layout img.active { z-index:2; } .canvas { z-index=10; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div id="main"> <!-- Header --> <header id="header"> <div id="title"> <h1><img src="assets/css/images/img_logo.png"></h1> </div> <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas> <div class="layout"> <img class="active" src="assets/css/images/img_background_night1.jpg" /> <img class="active" src="assets/css/images/img_background_sunrise1.jpg" /> <img class="active" src="assets/css/images/img_background_day1.jpg" /> </div> <!-- <div id="wrapper_top" style=" position: relative; z-index: 0;"> <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas> <div id="#content" style=" position: absolute; z-index: 2; color: #ffffff;"> </div> <div id="wrapper_bottom" style=" z-index: -1; top: 0; height: 100%; position: absolute; width: 100%;" > </div> </div> --> <div id="botton"> <nav> <ul> <li><a class='icon sensor_button sensor_up_right' id ='sensor_1' onclick="clickedSensor(0);" href="#"><img src="assets/css/images/img_sensor_1.png"></a></li> <li><a class='icon sensor_button sensor_up_left' id ='sensor_2' onclick="clickedSensor(1);" ><img src="assets/css/images/img_sensor_2.png"></a></li> <li><a class='icon sensor_button sensor_center' id ='sensor_3' onclick="clickedSensor(2);" ><img src="assets/css/images/img_sensor_3.png"></a></li> <li><a class='icon sensor_button sensor_arm_right' id ='sensor_4' onclick="clickedSensor(3);" ><img src="assets/css/images/img_sensor_4.png"></a></li> <li><a class='icon sensor_button sensor_arm_left' id ='sensor_5' onclick="clickedSensor(4);"><img src="assets/css/images/img_sensor_5.png"></a></li> </ul> </nav> <div id='sensor_info' > <div id='sensor_title'> </div> <div id='sensor_message'> </div> </div> </div> </header> </div> </div> 

Answer 1

尝试此操作，但将常规图像替换为CSS中的background-image： http : //css3.bradshawenterprises.com/cfimg/