How to set your background image?
This article can tell you how to set a good background image for your slides.
In this article
- What kind of image should be used for background?
- How does the background image adjust to the slide?
- How to ensure, that always the important part of the image is shown?
- How big images should I use?
- Readability tips
- Higher quality or faster loading image?
- How to keep the slider's ratio on any screen?
Video
What kind of image should be used for background?
A good background image is an image that you want to have as the background behind contents. You shouldn't have any texts on them, or anything that would require responsive adjustments. For those elements, use layers. So a background image should be just a simple image.
How does the background image adjust to the slide?
Within Smart Slider, the background image is adjusted to the slide. So your size settings will define the size of the slides, no matter what images you use.
Then the Slide background image fill option defines how the background images are adjusted to the slides. By default the images fill the slider completely, which means they'll be cropped when the image size is different from the slide's size.
Use fit fill mode, if you don't want any parts of your image to be cropped. This will leave empty space, where your image cannot reach.
How to ensure, that always the important part of the image is shown?
The focus point defines, which part of your image will stay on the slide in any responsive situation. So you should just set the focus point to the important part of your image.
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 slider: the size of the slide.
- Showcase slider: the size of the slide.
Readability tips
Images often have both dark and light parts, which makes texts over them less readable. To resolve this problem, you could add opacity to your background image, and select color too, for the background. This way you can make your background image darker or lighter.
The same happens, if you turn on "overlay" and select a partially transparent background color.
Another thing you can do is, that you can blur the background image. This can also make texts over it more readable.
Higher quality or faster loading image?
On websites, the standard resolution for images is 72 DPI (or also called PPI). This value partially defines their quality.
With images you should always 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.
Use our Slide Background Images optimization options, to change the quality and size of your images.
How to keep the slider's ratio on any screen?
A slider's size is affected by many settings. Follow this guide, if you would like to keep the slider size ratio on any screen size.