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.
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
Slide background imageand 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:
- Full width slider: 1920px width and the height of the slider
- Boxed slider: The size of the slider
- Full page slider: 1920x1080px
- Carousel or Showcase slider: the size of the slide.
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.
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
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 coloras the background image's overlay. First, turn on the
Overlaythen 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.