Trying to set a background image in Image With Text section

[SubStudio]

Hi All

I’m trying to add a background image to an Image With Text section block, but so far having no luck.

I’ve tried styling it directly in the liquid file for the page in question and also by adding it to the schema and CSS of the liquid file for that asset, but neither seems to work. I’m not great at coding, but I know my way around CSS and I’m confident enough to interpret the code for other sections that allow me to set a background image (such as the newsletter sign-up element).

I’ve also reached out to the theme developer, but they only offer to add the full schema/css option to a future release of the theme. To be honest, I’d be happy to do the manual customisation to the individual elements as and when I use them on a page, but I just can’t get it to work although I’m sure there must be a way.

I’m clearly missing something! Can anyone help?

I’ve attached a couple of screenshots of the section in its basic state, and showing what I would like to achieve.

Any and all suggestions would be gratefully received.

Cheers

Dazza

[Roy_12]

Hi @SubStudio ,

I’m happy to help you with that! Would you mind sharing the store URL and password with me?

Kind Regards
Roy

[niraj_patel]

Hello @SubStudio

You can add image like this:

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.image-with-text { background-image: url('path-to-your-image.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; width:100%; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[BSSCommerce-B2B]

Hi @SubStudio ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

Step 2: Search for the file base.css, theme.css, styles.css or theme.scss.liquid. And add this code snippet to the end of the file.

.image-with-text {
     background-image: url('path-to-your-image.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width:100%;
}

Step 3: Save and reload page:

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir.

[SubStudio]

Drama over!

I managed to do it using the Custom CSS panel in the theme editor (see image).

I had tried it at the very outset, but I guess I must have been targeting the wrong CSS Selector

Anyway, perseverance pays off in the end.

Thanks to @Roy_12 , @niraj_patel and @BSSCommerce-B2B for your input. The thing is, I was looking to target a specific section on a particular page. If I had edited the base CSS file, it would have added the same background image to every instance of that section across the whole website. That Custom CSS panel comes in so handy once I’ve worked out which selector to target.