Slider Revolution 6.3 NOW available!

You got several options for your Sliders background

Enhanced Features

Add Parallax movement, a Ken Burns effect, or Instragram-type Filters to your Images.

<!-- BEGIN SLIDE -->
<li data-transition="fade">
 
    <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
    <img src="assets/images/notgeneric_bg5.jpg"
         alt="Ocean"
         class="rev-slidebg"
         data-bgposition="center center"
         data-bgfit="cover"
         data-bgrepeat="no-repeat">
 
</li><!-- END SLIDE -->

Background Image Options:

data-bgposition
    The image's CSS Background Position value
    data-bgfit
    • cover
    • contain
    The image's CSS Background Size value. Use "cover" to fill the entire slider with the image, and "contain" when mixing portrait and landscape images.
    data-bgrepeat
      The image's CSS Background Repeat value.

      Solid Color

      <!-- BEGIN SLIDE -->
      <li data-transition="fade">
       
          <!-- Transparent image with solid color added to the style attribute -->
          <img src="assets/images/transparent.png" class="rev-slidebg" style="background-color: #E7E7E7">
       
      </li><!-- END SLIDE -->

      Transparent

      <!-- BEGIN SLIDE -->
      <li data-transition="fade">
       
          <!-- Load the transparent .png file for transparent backgrounds -->
          <img src="assets/images/transparent.png" class="rev-slidebg">
       
      </li><!-- END SLIDE -->

      Important Note

      YouTube Videos will only play from a live server.

      <!-- BEGIN SLIDE -->
      <li data-transition="fade">
       
          <!-- required for background video, and will serve as the video's "poster/cover" image -->
          <img src="assets/images/notgeneric_bg5.jpg"
               alt="Ocean"
               class="rev-slidebg"
               data-bgposition="center center"
               data-bgfit="cover"
               data-bgrepeat="no-repeat">
       
          <!-- BACKGROUND VIDEO LAYER -->
          <div class="rs-background-video-layer"
               data-ytid="M18TITevyhA" 
               data-volume="100" 
               data-forcerewind="on"
               data-nextslideatend="true" 
               data-videoloop="loopandnoslidestop"
               data-videoattributes="version=3&enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0&
               origin=http://www.yourwebsite.com"
       
          ></div>
       
      </li><!-- END SLIDE -->

      YouTube Background Video Options:

      data-ytid
        The YouTube Video ID.
        data-volume
          A number between 0-100.  Enter "mute" for no volume.
          data-forcerewind
          • on
          • off
          Always play the video from the beginning whenever the slide is displayed.
          data-nextslideatend
          • true
          • false
          Choose to automatically change to the next slide when the video ends.
          data-videoloop
          • none
          • loop
          • loopandnoslidestop
          Option to automatically replay the video when it ends.  For the "loopandnoslidestop" option, video will loop, but slider will progress to the next slide accordingly).
          data-videoattributes
            Additional options to pass into the YouTube API.  Enter your website's domain as the "origin" value.

            Important Note

            Vimeo Videos will only play from an online server.

            <!-- BEGIN SLIDE -->
            <li data-transition="fade">
             
                <!-- required for background video, and will serve as the video's "poster/cover" image -->
                <img src="assets/images/notgeneric_bg5.jpg"
                     alt="Ocean"
                     class="rev-slidebg"
                     data-bgposition="center center"
                     data-bgfit="cover"
                     data-bgrepeat="no-repeat">
             
                <!-- BACKGROUND VIDEO LAYER -->
                <div class="rs-background-video-layer"
                     data-vimeoid="30300114"
                     data-volume="100" 
                     data-forcerewind="on"
                     data-nextslideatend="true" 
                     data-videoloop="loopandnoslidestop"
                     data-videoattributes="background=1&title=0&byline=0&portrait=0&api=1"
                ></div>
             
            </li><!-- END SLIDE -->

            Vimeo Background Video Options:

            data-vimeoid
              The Vimeo Video ID.
              data-volume
                A number between 0-100.  Enter "mute" for no volume.
                data-forcerewind
                • on
                • off
                Always play the video from the beginning whenever the slide is displayed.
                data-nextslideatend
                • true
                • false
                Choose to automatically change to the next slide when the video ends.
                data-videoloop
                • none
                • loop
                • loopandnoslidestop
                Option to automatically replay the video when it ends.  For the "loopandnoslidestop" option, video will loop, but slider will progress to the next slide accordingly).
                data-videoattributes
                  Additional options to pass into the Vimeo API.

                  HTML5 Video

                  <!-- BEGIN SLIDE -->
                  <li data-transition="fade">
                   
                      <!-- required for background video, and will serve as the video's "poster/cover" image -->
                      <img src="assets/images/notgeneric_bg5.jpg"
                           alt="Ocean"
                           class="rev-slidebg"
                           data-bgposition="center center"
                           data-bgfit="cover"
                           data-bgrepeat="no-repeat">
                   
                      <!-- HTML5 BACKGROUND VIDEO LAYER -->
                      <div class="rs-background-video-layer"
                           data-videomp4="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
                           data-videopreload="auto"
                           data-volume="100" 
                           data-forcerewind="on"
                           data-nextslideatend="true" 
                           data-videoloop="loopandnoslidestop"
                   
                      ></div>
                   
                  </li><!-- END SLIDE -->

                  HTML5 Background Video Options:

                  data-videomp4
                    The url to your video, in .mp4 format.
                    data-videopreload
                    • none
                    • auto
                    • metadata
                    The HTML Video preload attribute.
                    data-volume
                      A number between 0-100.  Enter "mute" for no volume.
                      data-forcerewind
                      • on
                      • off
                      Always play the video from the beginning whenever the slide is displayed.
                      data-nextslideatend
                      • true
                      • false
                      Choose to automatically change to the next slide when the video ends.
                      data-videoloop
                      • none
                      • loop
                      • loopandnoslidestop
                      Option to automatically replay the video when it ends.  For the "loopandnoslidestop" option, video will loop, but slider will progress to the next slide accordingly).

                      Popular Solutions