I want to do like this page
Images are the background from CMS
and these texts from CMS too
I have some problems :e
If I use Display Setting to move texts to the position I want
(elements: heading, image in the collection item)
When I change the browser window size,
the texts position will not correct
If I use background setting
It’s not allow use images from CMS
Here is my public share link: LINK
(how to access public share link)
Hi @11145
Can you please share a read-only link of your project so that the community and I can help you resolve this issue?
Here’s how you can share the read-only link: Share a read-only link | Webflow University
Also, which pages is this section on?
Standing by for your link and response to help you resolve this issue.
Kindest regards,
Anna
thanks for your reply
Hi again @11145
Thanks for sharing your project’s read-only link.
First, I see that you’ve added both a background image and an image element. To achieve the design you’ve shared above, I recommend that you use only a background image.
Second, you don’t need to use margins and paddings in the display settings to position elements. Also, you don’t need to use positioning values to position these elements. All you need to do is nest the elements in the collection item.
See how you can fix it:
If you do it this way, you won’t even need to make a lot of changes on smaller devices.
See me build this from scratch, it’s faster than fixing it:
Also, I noticed that you have uploaded very large images in the CMS:
Large images can cause many issues and may be increasing the number of requests made on the page which slows down your site and may result in error messages. Typically, we recommend that you use images that are ~200-300kb or smaller, and for dimensions we recommend 1080px or 1920px wide to make sure they run smoothly on your site. I recommend that you compress these images before uploading to Webflow. There are many resources that you can use to resize and compress your images, tools like Photoshop, tinyjpg.com, tinypng.com, ezgif.com/resize.
Hope this is helpful. If you have any other questions, please don’t hesitate to reach out, and I’ll be happy to help!
Oh!!!
You are so kind.
I am very happy to see these videos.
Thanks for your reply and suggest.
You’re most welcome! Glad to help 
I have an another question
How can I always maintain the BG image 1:1 ?
Crop all your images before uploading them to Webflow.
Actually, I hope that the image(BG) can always shows by 1:1 whatever the width of window is.
I set the height is 400PX now, but that is not 1:1 when I see the page in other size of window.
What I need to set?
You also need to set the width to 400px or the same value as the height to keep the 1:1 ratio.
But when I resize the browser, the image can not show in 1:1.
I want to do like this site
https://hammer.dunked.com
when I resize the browser.
The grid always 3 column until the width of browser is smaller than a number.
And they keep the ratio in 1:1.
Can you please share the read-only link of your site again, please?
To keep the aspect ratio with a background image, you’ll need to set the div block containing the background image to have fixed width and height values. So for this specific case where your width is always fluid, using an image element makes more sense. That’s because media elements keep their proportions when resized.
Collection item 5 to auto. Clear the height value on all breakpoints so it inherits the auto value from desktop.Collection item 5. Add an image element inside it and connect it to the cover image
cover block and set it to position: absolute full. Add an image element inside it and connect it to the hover image.
cover title and cover description in a div block. Set that div block to position: absolute full. And drag it above the image.The structure should be like this:
Here’s the final result:
https://cl.ly/1d164c12c8b7/Screen%20Recording%202018-11-30%20at%2009.51%20AM.gif
Hope this is helpful.
Thanks very much!!!
you save my life!!!
You’re most welcome.