Streaming live at 10am (PST)

Apply a class (team photo) to an image


#1

Hello I am new to this however I have been working on these images for weeks and I keep getting the same results. The 3 images of the therapist side by side. The image of Amanda looks perfect and previously Chrissy did as well. Now when I drag the images to the “team photo” Name its class it puts it right into the circle for the team photo but it distorts the image. This is the problem. I have looked at the second site listed below several times to see what is different and I cannot figure it out. I have watch several Webflow university on “class” with no success. What am I missing.
2 site listed- the first is the one listed is the problem. The second is the example of what I want. Thank you for your help.
looking at the home page! 2 screen shots below.
30%20PM|690x328


Here is my site Read-Only:
Smooshed images/ need help
https://preview.webflow.com/preview/jhmm-d584b62461643c860f9865cf226ab0eb?preview=0e71cc47b63c22bdfa58a8ec4fbc1187

Correct images!
https://preview.webflow.com/preview/jhmm?preview=f038c811e22434351c3706103ecf38d8(how to share your site Read-Only link)


#2

Hi @AMartin

Good question - this looks like it’s happening because you have two different ways of presenting the images happening.

Amanda has her image set as the background image of a Div, whereas Chrissy and Mayumi are Image elements themselves.

A simple fix is to:

  • Copy the Amanda ‘Team Photo’ Div (cmd+c / ctrl+c)
  • Paste twice (cmd+v / ctrl+v)
  • Go the class of those copies and ‘Duplicate Class’ - call it Team Photo 2 for example
  • Same again for the 3rd - Team Photo 3
  • Now set the correct background image for Chrissy and Mayumi
  • Drag and drop them into their team wrappers
  • Delete the old images

Let me know if that fixes things :slightly_smiling_face:


#3

Thank You very much for your help. I am very excited to hear it is simple.

I am including a screen shot of what comes up. I copied Amanda’s image 2x. There is not a duplicate class option that I am seeing. I see duplicate separate from class & rename class or add class.
How do I set the correct background Image?
Thank you


#4

Ah yes, that mini menu - the duplicate is referring to element rather than class.

Just go to the top right of the designer instead, and you’ll see the duplicate class option:

Just to say ‘Combo’ classes and ‘Duplicate’ classes can suit different use cases, you can learn more at:


#5

Ok hum. I was able to do that but must be missing something they are still distorted. I will have to explore the above university videos a few more times to get it.

Again Thank you


#6

Hi @AMartin

I’ve looked at your (squished version) and the below is still the case or has reverted:

If you want to use just background images in this case, you need to remove the Team Photo ‘image elements’ entirely (like Chrissy in the above) and copy/paste Amanda’s Team Photo ‘div block’ instead (like you had in today’s initial reply - 3 Amanda ‘div blocks’)

Then in those - duplicate the class to eg ‘Team Photo Chrissy’’ and ‘Team Photo Mayumi’. Now they can have their own individual background image assigned.

_

Just to note - ideally background images should be used for background/decoration, whereas an image element is to give something context, so ideally use an image element. However in your case you would need to ensure each original image had the same square proportions/dimension, or that you had created the circular effect before uploading them - great explanation here from @vincent Crop images automatically )