This is how I make the responsive slider a background element as you required.
In the demo1.html, I include an inline style for the DIV wrapper of #ninja-slider:
style="position:fixed;width:100%;height:100%;z-index:-1;top:0;left:0;"
You can add the style to the #ninja-slider element either if you don't have the slider's outer wrapper(usually we don't need the outer wrapper at all, so the inline style can be added to ninja-slider.css. Yes, that's better!).
In the ninja-slider.css, I removed the max-width:960, the ul padding, and set navigation pagination and prev/next buttons display:none. After setting the slider z-index:-1, the nav controls are no longer accessible, so you have to make them invisible.
The details and source code:
- Download the package from Menucool.
- Change demo1.html to:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="ninja-slider.css" rel="stylesheet" type="text/css" />
<script src="ninja-slider.js" type="text/javascript"></script>
<style>
body {font: normal 0.9em Arial;margin:0;background-color:#333;}
a {color:white;}
ul li {padding: 10px 0;}
</style>
</head>
<body>
<div style="position:fixed;width:100%;height:100%;z-index:-1;top:0;left:0;">
<div id='ninja-slider'>
<ul>
<li><div data-image="img/md/1.jpg"></div></li>
<li><div data-image="img/md/2.jpg"></div></li>
<li><div data-image="img/md/3.jpg"></div></li>
<li><div data-image="img/md/4.jpg"></div></li>
<li><a data-image="img/md/5.jpg" href="http://www.menucool.com"></a></li>
</ul>
</div>
</div>
<div style="width:700px;margin:30px auto;color:#CCC;">
<p>demo 1 <a href="demo2.html">demo 2</a></p><br /><br />
<p>Ninja Slider is a touch-enabled image and content slideshow plugin. It is the most truly responsive slider in that:</p>
<ul>
<li>The slider will adapt to the size of its container</li>
<li>If set, it will choose the pixels from multiple versions of image that the user's device can actually use for faster page loading.</li>
<li>If max-width is set via CSS, the slider or its image will not exceed the max-width.</li>
<li>Image scaling: fully configurable</li>
</ul>
</div>
</body>
</html>
- Change its ninja-slider.css to:
#ninja-slider
{
width:100%;
margin:0 auto; /*center aligned*/
background:#222;
}
#ninja-slider > ul
{
padding:0 0;
}
/* slide */
#ninja-slider li > div, #ninja-slider li > a
{
margin:0 auto; /* center each slide */
border-radius:6px;
/*background:#999;*/
position: relative;
display:block;
box-shadow: 0 1px 5px rgba(0,0,0,.8),inset 0 0 1px rgba(255,255,255,.4);
}
/* loading image indicator */
#ninja-slider div.preload
{
background: black url(img/loading.gif) no-repeat center center;
}
/*----- video -----*/
#ninja-slider a.video
{
position:absolute;
border:0;top:0;left:0;
width:100%;height:100%;
background:transparent url(img/video.png) no-repeat 50% 50%;
}
/*------ pager ------*/
/* The pager id should be: slider id + "-pager" */
#ninja-slider-pager
{
display:none;
}
/* --------- navigation controls ------- */
/* The nav id should be: slider id + ("-prev", "-next", and "-pause-play") */
#ninja-slider-prev, #ninja-slider-next
{ display:none;}
/*------- Settings that usually don't need to change ------- */
#ninja-slider > ul
{
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000px;
backface-visibility: hidden;
perspective: 1000px;
-webkit-tap-highlight-color: transparent;
}
#ninja-slider-pager, #ninja-slider-prev, #ninja-slider-next, #ninja-slider-pause-play
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#ninja-slider
{
position: relative;
overflow: hidden;
/*visibility: hidden;*/
padding:0;
}
#ninja-slider > ul
{
overflow: hidden;
position: relative;
list-style:none;
margin:0;
}
#ninja-slider > ul > li
{
float: left;
width: 100%;
position: relative;
list-style:none;
padding:0;margin:0;
}