Can't add custom backgrounds to Dawn theme

[FloorT]

I'm trying to apply a background image to a specific multicolumn section on my Shopify site, but the CSS doesn't seem to work as intended. This is the page i'm trying to add it to but will have other sections/pages that I will want to edit soon as well https://q5shfa-15.myshopify.com/pages/room-keys

Here's what I’ve done so far:

1. I uploaded my image to Shopify and used its URL:

   • Example: https://cdn.shopify.com/s/files/1/0683/0424/0837/files/IMG_8104.jpg?v=1734480669

2. I added the following CSS in my theme editor:

   css

   Copy code

   .section-multicolumn { background: url("https://cdn.shopify.com/s/files/1/0683/0424/0837/files/IMG_8104.jpg?v=1734480669") no-repeat center center; background-size: cover; }

3. I confirmed that the image URL works (I can view it directly in a browser).

4. I inspected the multicolumn section in developer tools and identified the class section-template--17947066171589__multicolumn and tried to target it directly, but the style still doesn’t apply.

5. I also tried adding !important to override any conflicting rules, but it didn’t help.

6. Shopify shows an error for "Certain at-rules are not supported; try using global CSS", and I’m not sure if my method is valid for targeting only one specific section.

---

What I Need Help With:

• How can I apply a background image only to one specific multicolumn section without affecting others?
• Is there a way to target dynamically generated section classes in Shopify?
• Could Shopify’s caching or Liquid templates be preventing the CSS from applying?

Any insights or suggestions would be greatly appreciated!

[LizHoang]

Hi @FloorT, 

Thank you for reaching out regarding the issue with applying a background image to the multicolumn section on your Shopify site. I’ve reviewed your approach and here’s a detailed response to your questions:

1. Custom CSS for generated multicolumn section: To ensure the background image applies correctly to the multicolumn section, you can use the following CSS code. This should target the generated section correctly.

.multicolumn:has(.section-template--18149098717381__multicolumn_ndbxck-padding) {
    background: url(https://cdn.shopify.com/s/files/1/0683/0424/0837/files/IMG_8104.jpg?v=1734480669) no-repeat center center !important;
    background-size: cover;
}

This is the expected result: 

2. Targeting specific sections: Unfortunately, there is no direct way to apply CSS rules to specific sections of your site without targeting individual-generated classes. Each generated multicolumn section will require a unique CSS rule.

3. CSS Rule application error: Shopify detects errors when CSS rules cannot be applied, and it may trigger a warning. In your case, this is likely because the class .section-multicolumn was used instead of the appropriate .column class. Please make sure you’re targeting the correct class for the section you wish to modify.

I hope my feedback is helpful to you.

Liz

[FloorT]

Hello I pasted that code into the CSS for that specific section and it is still not applying. Any other suggestions?

[LizHoang]

Hi @FloorT , thanks for your feedback. Could you please leave the code in place so I can investigate further and pinpoint the issue?

I appreciate your patience and will get back to you as soon as possible with an update.

Liz

[LizHoang]

Hi @FloorT,

I’ve reviewed your site, and it seems that the custom CSS we provided hasn’t been added yet. Could you please take a screenshot of where you’ve added the code so we can review it further? This will help us ensure everything is correctly implemented and resolve the issue. 

Thanks for your cooperation in this matter. 

Liz