How to set your background image?

In this article

What is a background image?

The background image is the image that's behind all layers in your slider. The way the slide background image looks in the slider is defined by the Slide background image fill option. By default the images fill the slider completely, which means they'll be cropped when the image and slider ratios differ.

💡 Tip: Check out our detailed tutorial video about the Slide Background.

You can avoid the cropping by using images which have the same size as your slider, or by switching the Slide background image fill to Fit or Blur Fit.

☝️ Note: The Slide background image and the Content layer's background image behave differently! Learn more about the difference.

How big images should I use?

We recommend the following image dimensions:

💡 Tip: If you're creating a full width image gallery you might need to turn off the Limit slide width option.

Higher quality or faster loading image?

When it comes to quality, you should aim for the lowest quality that you still find acceptable. This will result your site loading with a pretty good speed.

The biggest question in this case is what do you find acceptable? A photographer wouldn't allow their images to lose quality, even if the page loading speed will be slower because of the huge file size of these high quality slider images. An average person doesn't need perfect images, as you can't even tell the difference in some cases, but you can tell the difference between the loading speed.

How to select my background image properly?

A good background image is just that, an image that you want to be the background of your slide content. Be prepared that parts of the background image will be cropped on different devices. Use the Focus option to set which part of the image is the most important for you.

💡 Tip: If you want your image to appear without any cropping, because all parts of it are equally important, you should use it as an image layer.

Background images should not have any textual content on them. To have content on the slides, use layers. The responsive result will be much better. Additionally, using textual layers have SEO advantages.

Background images should be nothing more than what their name says: the background of your slides. If the image contains anything you want to align your content to then these elements should not be on the background image. For example, if your background image has a logo or a person that you want the layers not to cover, you should remove them (the logo or person) from the background. These elements should be used as their own image layer instead.

Why are my images cropped?

The slider uses the set Slide background image fill option to decide how to display the images in the slider. By default the Fill option is set which enlarges the images if needed to ensure they always cover the whole slider.

So, if your images are cropped, it happens because your image and slider ratio differs.

How to solve the problem?
  • Make sure your slider and the images have the same ratio. (E.g. if your Boxed slider is 1200x600px then use images that have 2:1 ratio.) If your slider is full width, you might need to turn off the Limit Slide Width option.
  • Change the Slide background image fill option to fit or blur fit.

How to create an overlay for the images?

With an overlay on your background image you can increase the contrast which makes the text layers easier to read. Smart Slider 3 offers two ways to achieve this.

Using the color as an overlay

You can use the Slide background color as the background image's overlay. First, turn on the Overlay then set a background color which is semi-transparent.

Lowering the image opacity

The other method is to set a background color (1) and lower the image's Opacity (2) until the desired effect is reached.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.