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  3 years ago   viewed: 24913    

6 Answers


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

jedaiCoder   one year ago

can we use position set to absolute and fixed simultaneously?

kd5   25 days ago

Is there anyway to have the sliders height fixed ie. fullscreen with nothing below? Like this:

Tim Green
  2 years ago

I think you need the following CSS settings in addition to John's post:

html, body { height: 100%; }

Natalia   2 years ago

where is js file for image slider

rachna   2 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   3 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: