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
Skærmbillede 2019-08-14 kl. 14.31.05.png634×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
Skærmbillede 2019-08-14 kl. 14.58.32.png476×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.