Content slider background images – optimal size & positioning

This article includes some general info about the optimal image size of the background images in the content slider of the Story theme and also some general tips about positioning the images depending on how you would like to display them.

The content slider by default displays the background images with a parallax effect covering the entire visible area of the element. 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.

Depending on the image and screen ratio, the parallax background effect can sometimes make the background images look a bit zoomed – that’s because when a position fixed is set to the background style, the background image covers the entire screen area instead of the visible element area. Here is a screenshot that better illustrates this:

header-bg1

 

Disable the parallax effect

Disabling the parallax effect will resize the background image so that it covers only the content slider area and not the entire screen. Here is an example how the image above would look like when the parallax effect is disabled:

header-bg2

The parallax effect can be disabled per slide. In order to disable the parallax effect, when editing or creating the slide, first select the “Custom Settings” option in the “Slide Settings” field of the slide. Then select the “Cover” option in the “Background Style” field: bgstyle

 

Image Alignment

Depending on the image and srceen ratio different parts of the image are visible on the different screens. 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. For example, looking at the image from the screenshot above – the girl is positioned at the left side of the image, so for better display results, we can set the image to be aligned to the left, so that the girl is always visible, regardless of the screen used.

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 option in the Background Image Alignment field below.

Article key words: image dimensions, image cropping, content slider image cropping, image resizing, optimal ratio, image crop, image sizing, portrait images

Was this useful? 2