Specific image position for image from CMS


I would like to only adapt the ‘position’ of the hero image for ‘mobile view only’ only ‘for this specific image’ that comes from CMS.




Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey there! I have no idea what you mean. But do you mean like this?

Yes exactly
Applying this position only this specific image

You can’t change it for a specific image. You will have to change the background image position for the div on mobile. Like this:

Thanks @ToreSBentsen I tried this already. But it affects all other images.

I inverted horizontally the image and now it fits. Thanks for the help!

Use the object-fit method for the image. Set the position of the image:

  1. Add an “Options” field in the CMS. Set the values to “Top”, “Center”, “Bottom”.
  2. Then in the Designer, make 3 copies of the same image. Each image will need a separate class (or combo class)
  3. Set the positions for each image in the object-fit panel.
  4. Set a conditional parameter to only show the image according to the option selected (“Top”, etc.) in the CMS. The others will not be shown. For example: The image (with class of “Top”) will show when the option in the CMS is set to “Top” because the conditional directs it.