Looking for mind-blowing effects? 🤯 Explore Slider Revolution's advanced WebGL animations

You got several options for your Sliders background

back to top
  1. Image
  2. Solid Color
  3. Transparent
  4. YouTube
  5. Vimeo
  6. HTML5 Video

Image

back to top

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

      back to top

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

      back to top

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

      YouTube

      back to top

      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.

            Vimeo

            back to top

            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

                  back to top

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

                      [ess_grid alias="wp-popular-solutions"]
                      Impressum | Datenschutz