I recently updated Elements and discovered that background images can now be used within the CMS environment. While I currently have a workaround using JW’s CMS in Classic by setting Elements to pull the image externally, I would like to try using Elements directly.
I’ve tried to find an example regarding how to do this, but unfortunately, nothing has been documented yet. The only information I’ve found regarding CMS images is the following blurb:
“Use the Image component with Type set to ‘CMS,’ then make it full-width and set the Aspect Ratio → Object Fit to ‘Cover’ to visually behave like a background.”
If my assumption is correct and a CMS background image can indeed be used, could someone please provide a functional example of how to implement this? I learn best by observation rather than through videos or written explanations. Thank you!
You can use a CMS image as the Background component’s source by doing the following:
Place the Background component inside an Item component (or inside a Collection when working on a listing page).
Set the Background component’s Background Style to Image.
Change the Type to CMS.
The Background component will then automatically look for item.image.src in your CMS item’s data. To make sure this works, add the following to your CMS Item’s frontmatter:
image:
src: folder/filename.jpg
You can also point this to a full external URL if you’re used to “warehousing” images like in Classic.
Hope that helps! Let me know if you need anything else
