I’d like to add a custom background image on multicolumn - similar to the one below:
Thank you!
URL: https://39o7xea6sanmy82v-68790550809.shopifypreview.com
Code: teagau
Topic summary
Goal: add a custom background image to the multicolumn section in Shopify’s Dawn theme, matching a full-width banner look (reference: honeywellaircomfort.com).
Proposed approaches:
- Edit multicolumn.liquid to add an image setting (picker) and render it in the section’s HTML.
- Add CSS in base.css targeting the specific multicolumn section class (e.g., .section-template–…-padding) with background-image, cover, center, no-repeat, and upload the image to Settings > Files to use its URL.
Latest update: The provided CSS solution did not work for the requester. They shared a new preview link and screenshots, clarifying they need the background’s width, height, and placement to mirror the reference site.
Context notes:
- Preview links expired and were refreshed; screenshots are central to understanding the desired layout and dimensions.
Status: Unresolved. Next steps likely require correcting the CSS selector (ensuring it matches the section’s actual class/ID) or implementing the image as a configurable setting in multicolumn.liquid to reliably control full-width background behavior.
Hi @erika_brandlab1 ,
To add background image we need to customize the multicolumn.liquid file. You should create a image section in the liquid code and add it in the html.
Your link was expired. Please share a new link with us if you still need to fix the above issue.
Hi @BSS-Commerce here’s the updated link: https://c2jee4zb5e7dq0ob-68790550809.shopifypreview.com
Thank you
Please follow these steps:
- From Shopify admin → Online store → Edit code:
- You find the file base.css and add the following code at the end of the file:
.section-template--17118277304601__e1225a6b-f8d2-4be2-b2c0-9e9ee69013fe-padding {
background-image: url("your-image-url");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-clip: content-box;
}
For “your-image-url”, you can add the following:
From Shopify admin → Settings → Files, you upload the file and then use that image link.
I hope that this can help you solve the issue.
1 Like
I’m sorry this doesn’t work 
It currently looks like this:
I would like the image to be the same as this, in terms of width, height and placement:
URL for this screenshot: https://honeywellaircomfort.com/
Thank you