Slide settings - Background (background image, background video)

This is where you can find the slide settings.

Quick navigation

Image tab

Background

  • Image - The background image of your slide. If you have the Adobe Creative SDK - Aviary set up, then you can edit your image too. With the Manage Expert button you can pick different images for different devices. These will be based on the Global Settings → Responsive Mode → Based on option, if they should change based on the device, or the screen's width. Also these device specific images are connected to the main image, not to the slider, so if you are using this image somewhere else too, the same device specific images will be used there, and if you delete them in there, this image's device specific images will be deleted too.
  • Focus X, Focus Y - You can change the focus point of the image. X: 0 and Y: 0 means the top left corner, X: 100 and Y: 100 means the bottom right corner.
  • Opacity - With this option you can have an image as background and you can set a background color at the same time. For example if you have a light image and want it to be darker, you can set a blackish color then change the opacity.

    100% opacity means the background color won't be shown, 0% opacity means the background image won't be shown.

  • Alt Expert- The alt tag of your background image. Give something related to your image for better SEO.
Background color

The background color of the slide. It is possible to set a gradient (made of two colors of your choice);

Fill mode

How your image will fill up the slide, if it doesn't have the same size, as your slide.

  • Slider's default: The fill mode will be the same as you set at the Slider settings → General → Slide background image fill.
  • Fill: Your image will cover your slide.
  • Fit: Your whole image will be on your slide in the center. Stretch: Your image's ratios will be changed, it will be stretched out to cover the whole slide.
  • Stretch: Your image will be stretched out to cover the whole slide, so if it's ratio is very different from the slider's size, it will be kind of distorted.
  • Center: Your image will be on your slide in the center, with its original size.
  • Tile: Your image will have its original size, and it will be repeated to cover the whole slide.
  • Parallax: Your background will be in a fixed position, not moving lower or higher, as you scroll. Check out the sliders and video here to better understand this, and all available parallax effects. Some tablets and mobiles aren't supporting the codes necessary for this, so if you want to, you can turn it off for tablets and mobiles in here.
Fill mode examples

Custom lightbox image

When the Lightbox from backgrounds feature is used, it is possible to set device specific lightbox images for each slide. First, select an image to replace the lightbox on desktop, then hit the Edit button and select different images for different devices.

To be able to see this option, turn on the Lightbox from backgrounds option.

Video tab

Background video

You can choose to show a video from your FTP to be your slide background, just write the link of your video here (example: http://www.w3schools.com/tags/movie.mp4). There are three file extension inputs (mp4, webm and ogg) to have fallbacks, because not all browsers are supporting all of them, you can see them here.

  • Muted - Turn on or off the volume.
  • Loop - Make your video start again after it's finished.
  • Preload -
    • Auto: The video will load with the website even if it's not on the active slide.
    • Metadata: The video won't load with the website, only when it is on the active slide, so it will speed up your website.
  • Fill mode
    • Fill: The video will cover the whole slide.
    • Fit: The whole video will be on the slide in the center.
    • Center: The video with its original size will be on the slide in the center.

If you would experience problem on your mobile or tablet, please have a look at this documentation.

Demo sliders

Would you like to see some example on how background videos are working on real sliders? Check out these demo sliders:

The rest of the settings are the same as you can find at the Image tab

Color tab

Background color

The background color of the slide. It is possible to set a gradient (made of two colors of your choice).