How to add background image of a section in DAWN with Custom CSS Code

[Weekenders]

Hello,

I am using Dawn, I want to change the background image of a section using Custom CSS. As it seems to be easiest way to do it. I add this code below, but nothing changes in my section. I have tried using a variety of section tags, but the tax I think I am using from inspect is not working and I have tried many variations. Any ideas?

{
background: url("https://cdn.shopify.com/s/files/1/0615/8116/4622/files/Background_Image.png?v=1730820255")
no-repeat;
background-size: cover;
}

[Webstablish]

Hi @Weekenders, can you share your website so we can have a look? Maybe it gets overruled by another CSS rule.

[Weekenders]

TheWeekenders.ca - but I am using a draft to make these edits... is there a way I can share these drafts? Maybe try this: https://theweekenders.ca/?_ab=0&_fd=0&_sc=1 I am trying to make a change to each section on this page... starting with the Rich Text section.

[Webstablish · Accepted solution]

It is being overruled by a lower div, try this:

.rich-text.content-container{
  background: url("https://cdn.shopify.com/s/files/1/0615/8116/4622/files/Background_Image.png?v=1730820255")
    no-repeat;
  background-size: cover;
}

[Weekenders]

This worked for the Rich-text section, What about if I need to do the same with the image-with-text section? I used the same code, and it wont work for the image-with-text

[Webstablish]

The HTML structure is different between sections. In this case, the gradient class seems to be used by both sections (also contains the background property). So you could do this for both:

.gradient {
  background: url("https://cdn.shopify.com/s/files/1/0615/8116/4622/files/Background_Image.png?v=1730820255")
    no-repeat;
  background-size: cover;
}

[Weekenders]

This worked like a charm!

[Weekenders]

Thanks~