Specific image position for image from CMS

Design help CMS
1

Hello!

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.

https://www.stevens-school.be/b-formation/les-soins-lakshmi

https://preview.webflow.com/preview/stevensschool?utm_medium=preview_link&utm_source=designer&utm_content=stevensschool&preview=7a0ef2e24e0ed08cfbae2906c343f67e&pageId=5cc07e21fc13ed35ce9dd6d5&itemId=5cc07e21fc13ed8bb39dd770&mode=preview

Thanks!

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

2

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

05
05634×1362 434 KB

3

Yes exactly
Applying this position only this specific image

4

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:

32
32476×1504 57.2 KB

5

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!

6

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.