Fullscreen slider background images – optimal size & positioning
This article includes some general info about the optimal image size of the background images in the fullscreen slider of the Story theme and also some general tips about positioning the images depending on how you would like to display them.
The fullscreen slider displays the background images, so that they cover the entire visible area of the slide and they are by default centered. Depending on the current screen size, the image will be displayed in a different way on each screen/device, so there is no specific optimal ratio for the images, however it is recommended to use images that are around 1000 pixels and not bigger than 1500 pixels in size, so that the page loads faster.
With the default settings, a background image on the slide would look like this:
the image covers the entire slide and it is centered in the visible screen area.
Changing the image alignment
As you can see on the screenshot above, different parts of the image are visible on the different screens depending on the image and srceen ratio. If it is important to always display a specific part of the image, you can change the default alignment of the background image for the slide.
In order to do this, when creating or editing the slide, select the Custom Settings option in the Slide Settings field of the slide and then you can select a custom alignment in the Background Image Alignment field below. For example, with the image above, if we select the “Center – Top” option, the top part of the image will be always visible:
Making the image fit to the screen with no hidden parts
If it is important to fully display the background image of the slide, with no hidden parts, you can modify the default background style of the slide with a CSS tweak, so that the image can be always fully visible:
as you can see, with this approach, the image won’t cover the entire slide area, however it will be fully visible on all the different screens.
If you would like to apply this style, go to the Story Options -> Typography & Styles -> Additional Styles section and add the following CSS snippet:
.section {
background-size: contain !important;
background-repeat: no-repeat;
}
If you would like to apply this style to the fullscreen horizontal slider images as well, just add this snippet to the Additional Styles section:
.slide {
background-size: contain !important;
background-repeat: no-repeat;
}
You can also select a custom background color in the settings section of the slide, so that it better matches with the background image.