How can I do about the background image for CMS

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

home page
https://preview.webflow.com/preview/yu-wei-s-first-project-ce1f95?utm_source=yu-wei-s-first-project-ce1f95&preview=748707a0513a51660daf8760889a4bcb

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:
CloudApp

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:
CloudApp


Also, I noticed that you have uploaded very large images in the CMS:
CloudApp

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.

1 Like

You’re most welcome! Glad to help :relaxed:

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?

https://preview.webflow.com/preview/hiphopwei-portfolio?utm_source=hiphopwei-portfolio&preview=748707a0513a51660daf8760889a4bcb

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.

CloudApp

  1. Set the hight of Collection item 5 to auto. Clear the height value on all breakpoints so it inherits the auto value from desktop.
  2. Remove the background image from Collection item 5. Add an image element inside it and connect it to the cover image
  3. Remove the background image from the cover block and set it to position: absolute full. Add an image element inside it and connect it to the hover image.

CloudApp

  1. Add the 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:

CloudApp

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!!!

1 Like

You’re most welcome.