I cant figure out how to have the image that covers everything in a grid and dose not stretch or narrow. i know with dive blocks you can change the background that way but what about dynamic images.
Im trying to do that on the bottom of my main page
https://preview.webflow.com/preview/realestate-bdc930?utm_source=realestate-bdc930&preview=42e876997b1bc1a43131b82e90be6f8a
Hi Vlad_Kuksenko,
It’s easy:
Done!
Can you do a screen recording, im 0% knowledge in coding. im confused if i do that and then import the image
https://vimeo.com/302676035/bf5e1e27ff
You can do whichever order you want. Image first and then embed or the other way round as long as you know which css class you’ll be using. If you have any conflict with other images. Use another class and change the:
.image
to the class you want.
here is what im getting, it still dose not set to “cover”. Im sure im doing something wrong
Here is my link, its under “test page”
https://preview.webflow.com/preview/realestate-bdc930?utm_source=realestate-bdc930&preview=42e876997b1bc1a43131b82e90be6f8a
Hey @Vlad_Kuksenko, you’re almost there.
Add the image class name to every image that you wish to be set to cover. There are some styles on that class that need to be removed.
Change the height to 100% and display to auto. Now every image element with the class `image’ inside of a grid will fill the height and width of its grid position and then the image will fill that space using object-fit:cover.
You can change the class name to anything you’d like as long as it matches in the html embed and in the style panel. Hope that helps. Happy designing!
You need to set the positioning in AUTO. And give a class name to you images.
edit: Thanks matthewpmunger much clearer like this
It works! thanks guys! is there a good place for resources that will help me to get started with basics of CSS and java that I can use in webflow?
