Ninja Slider / Posts /

Make the slider a fixed background element so page content just scrolls on top of it

My Ninja Slider is 100% of the browser window by removing the max-width from the CSS. Is it possible to make the slider a fixed background/element so my content just scrolls on top of it? 
Kevin  9 years ago   viewed: 44559    

3 Answers


Why dont you use z-index, position fixed and absolute?

jedaiCoder   7 years ago

can we use position set to absolute and fixed simultaneously?

kd5   6 years ago

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:
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:

  1. Download the package from Menucool.
  2. 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=""></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>
  3. 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 { 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; }

John   9 years ago


Your name*
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: