• slidebg1
    Transparent Background
  • slidebg1
    Colored Background
  • slidebg1
    Covering Left Top Aligned Image
  • slidebg1
    Covering Center Center Aligned Image
  • slidebg1
    Covering Right Bottom Aligned Image
  • slidebg1
    Containing Center Center Aligned Image
  • slidebg1
    Containing Right Bottom Aligned Image
  • slidebg1
    Repeating Background

Different Backgrounds

You can set the Main Background transparent, Colored, or via an image source. Change the Image aligns, cover/contain/normal fillings and Repeating via the data options

Transparent Background

		<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
			<!-- MAIN IMAGE -->
			<img src="../examples/images/transparent.png"   alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
			...
		

Colored Background

		<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
			<!-- MAIN IMAGE -->
			<img src="../examples/images/transparent.png" style="background-color:#ff0000" alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
			...
		

Aligned Covering Background

		<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
			<!-- MAIN IMAGE -->
			<img src="../examples/images/someimage.png" alt="slidebg1"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
			...
		

Aligned Containing Background

		<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
			<!-- MAIN IMAGE -->
			<img src="../examples/images/someimage.png" alt="slidebg1"  data-bgfit="contain" data-bgposition="center center" data-bgrepeat="no-repeat">
			...
		

Repeated Background

		<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
			<!-- MAIN IMAGE -->
			<img src="../examples/images/tiledimage.png" alt="slidebg1"  data-bgfit="normal" data-bgposition="top left" data-bgrepeat="repeat">
			...