Ninja Slider / Posts /

How to customize a specific position and size for a responsive image in the slider?

I want to customize a specific position and size for a responsive image in the image slider.  Is it possible and how?
Supriya  10 years ago   viewed: 16195    

1 Answer


Yes you can specify your own backround-position and background-size for any responsive image in the slider to override the Ninja Slider's default settings:

  • background-position:

    The data-image attribute will be used to set the background image of the slide. The background image's default style:

    background-repeat: no-repeat; background-position: 50% 50%;

    You can override them with your own styles, eg.

    <li><div data-image="/img/1.jpg" style="background-position:50% 30px;"></div></li>

  • background-size:

    By default the responsive background image will adapt to its container in the style background-size:contain;. You can override it with your own specifications. For example:

    <li><div data-image="/img/1.jpg" style="background-size:cover;"></div></li>

    <li><div data-image="/img/4.jpg" style="background-size:auto 200px;"></div></li>

    Learn more about CSS3 background-size

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