The details shared here apply to the most recent version of Parallax. To keep your theme up to date, check out this helpful document.
The 'Image focal point' setting can be used to keep the subject of your photo in view and decides what part of the image shouldn't be cropped while the image is enlarged to fit the device.
This setting has been added in Parallax 4.0.0 and is available for any banner image section in the Parallax theme (applies on desktop and only for cropped images on mobile):
- Image with text overlay
- Video (for the placeholder image)
- Collection page banner
- Contact page banner
- Blog page/Blog post banners
Some more detail – with this setting, CSS is used behind the scenes to move the background image around within its container. This is done by manipulating the background-position property. So, when an image focal point is selected, a new value for the background-position gets applied to the banner image in order to position it accordingly!
The options for the Image focal point setting are:
- Top left
- Top center
- Top right
- Bottom left
- Bottom center
- Bottom right
The first value is the horizontal position and the second value is the vertical position. The top left corner is 0% 0% and the bottom right corner is 100% 100% – based on the selection, the values for both positions gets updated.