Solved

Background Image behind Rich Text Box

BKatsby
Tourist
10 1 6

Hello! I'm trying to put in a background image behind some words in one or more of my Rich Text boxes on Shopify. I am operating on the Dawn theme. Could you let me know how to go about doing this? I appreciate any and all help!

Accepted Solution (1)
BKatsby
Tourist
10 1 6

This is an accepted solution.

Hello @Made4uo-Ribe,

 

So i used the inspiration from the direction you were trying to go and just couldn't figure it out. Instead I used ChatGPT and told it what I needed and this is what worked ( for others looking for a similar solution ).

 

The first example is a template of how to add a background image to a specific rich text section. (you can find the rich text section ID by right clicking the section and hitting "inspect" on your actual website) 

BKatsby_0-1705961334551.png

 

 

/* Add background image to a specific Rich Text section */
.your-rich-text-section-class .rich-text__wrapper {
background-image: url('your-image-url.jpg');
background-size: cover; /* Adjust as needed */
background-position: center; /* Adjust as needed */
color: #ffffff; /* Set text color to be visible against the background */
padding: 20px; /* Adjust padding as needed */
position: relative; /* Add this line to adjust the stacking context */
z-index: 1; /* Add this line to adjust the stacking context */
}

 

The second example is the template used with my own inputs to provide a better example of what a finished product might look like. Keep in mind that if you copy and past this second example, it will not work for your website. The image URL and section ID is unique to your situation.  

 

/* Add background image to a specific Rich Text section */
#shopify-section-template--15362536243254__adace35a-694b-494e-bfeb-dc96812c3416 .rich-text__wrapper {
background-image: url('https://cdn.shopify.com/s/files/1/0584/3222/5334/files/What_Mechanical_Keyboard_switch_is_best.png?v...');
background-size: cover; /* Adjust as needed */
background-position: center; /* Adjust as needed */
color: #ffffff; /* Set text color to be visible against the background */
padding: 20px; /* Adjust padding as needed */
position: relative; /* Add this line to adjust the stacking context */
z-index: 1; /* Add this line to adjust the stacking context */
}

 

And again, like what was reiterated before. This goes at the bottom of your base.css code (atleast if you are using the Dawn theme).

 

Thanks for your help Made4uo-Ribe. You put me in the right direction!

 

Cheers!

Katsby!

View solution in original post

Replies 14 (14)

Made4uo-Ribe
Shopify Partner
5122 1221 1494

Hi @BKatsby 

When you used this code, the image youll put in the rich text may visible on the other richtext that youll do in your website. If you like to make it only on specific I would need your store URL to get the selector. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.rich-text {
    background-image: url('your-image.jpg');
    background-size: cover; 
    background-position: center;
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


BKatsby
Tourist
10 1 6

How do I give you my store url? It's Titantactile.com

 

I want it only on the home page just below my Header bar. I have a rich text section there that I want to have a background image for.

 

And my other question, I have the image saved locally on my computer, how would the code look if I was to use an image saved locally?  would it be...?

 

background-image: url('C:\Users\"username"\Desktop\"image-name"');

Made4uo-Ribe
Shopify Partner
5122 1221 1494

Used this code instead. 

 

.section-template--15362536243254__2877c68b-753a-4de5-8054-1a5b88ece97a-padding {
    background-image: url('your-image.jpg');
    background-size: cover; 
    background-position: center;
}

 

And Save. 

What you can do to save your Image. Go to Admin Store > Content 

Made4uoRibe_0-1705593825314.png Choose Files 

Made4uoRibe_1-1705593851510.png Upload the files fomr the computer.

Made4uoRibe_2-1705593894157.png

When Upload finish copy link and paste on the code. 

Example: 

Made4uoRibe_3-1705594040861.png

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


BKatsby
Tourist
10 1 6

Hi Made4uo-Ribe!

 

Thank you for your response and your efforts to help me. Unfortunately that pastes a background image over the WHOLE home page section, so i'm sorry if I didn't make myself very clear. While your code is actually awesome and I will definitely use later on, what I really wanted was to only paste a background image behind the first Rich Text box I have on my home page....Please see screenshot attached... i.imgur.com/3mATwsi.png

 

Made4uo-Ribe
Shopify Partner
5122 1221 1494

That's a bit wierd cause the code is not for the whole homepage. 

 

.rich-text.content-container.color-background-1.gradient.rich-text--full-width.content-container--full-width.section-template--15362536243254__2877c68b-753a-4de5-8054-1a5b88ece97a-padding {
    background-image: url('your-image.jpg');
    background-size: cover; 
    background-position: center;
}

 

Check this one again. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


BKatsby
Tourist
10 1 6

Hi again @Made4uo-Ribe !

 

So the code did the same thing... To be clear, im putting this code at the bottom of my Assets > base.css code.  And i'm using the Dawn theme. Is that the right place to put it? https://i.imgur.com/Ai4x2R5.png

Made4uo-Ribe
Shopify Partner
5122 1221 1494

Oh, I thought thats a banner. Would you mind to share the preview of the theme where you add the code? Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


BKatsby
Tourist
10 1 6

Not a banner, no. Its my Home Page, and its a "Rich Text" block in the "Template" section. https://i.imgur.com/7A6kOfS.png

BKatsby
Tourist
10 1 6

Any other suggestions! @Made4uo-Ribe ?

Made4uo-Ribe
Shopify Partner
5122 1221 1494

Sorry, I was confuse. There is no banner its all rich text. Yes that is correct where you place the codes. But be sure after the } last curly bracket. 

 

.section-template--15362536243254__adace35a-694b-494e-bfeb-dc96812c3416-padding {
    background-image: url('your-image.jpg');
    background-size: cover; 
    background-position: center;
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


BKatsby
Tourist
10 1 6

This is an accepted solution.

Hello @Made4uo-Ribe,

 

So i used the inspiration from the direction you were trying to go and just couldn't figure it out. Instead I used ChatGPT and told it what I needed and this is what worked ( for others looking for a similar solution ).

 

The first example is a template of how to add a background image to a specific rich text section. (you can find the rich text section ID by right clicking the section and hitting "inspect" on your actual website) 

BKatsby_0-1705961334551.png

 

 

/* Add background image to a specific Rich Text section */
.your-rich-text-section-class .rich-text__wrapper {
background-image: url('your-image-url.jpg');
background-size: cover; /* Adjust as needed */
background-position: center; /* Adjust as needed */
color: #ffffff; /* Set text color to be visible against the background */
padding: 20px; /* Adjust padding as needed */
position: relative; /* Add this line to adjust the stacking context */
z-index: 1; /* Add this line to adjust the stacking context */
}

 

The second example is the template used with my own inputs to provide a better example of what a finished product might look like. Keep in mind that if you copy and past this second example, it will not work for your website. The image URL and section ID is unique to your situation.  

 

/* Add background image to a specific Rich Text section */
#shopify-section-template--15362536243254__adace35a-694b-494e-bfeb-dc96812c3416 .rich-text__wrapper {
background-image: url('https://cdn.shopify.com/s/files/1/0584/3222/5334/files/What_Mechanical_Keyboard_switch_is_best.png?v...');
background-size: cover; /* Adjust as needed */
background-position: center; /* Adjust as needed */
color: #ffffff; /* Set text color to be visible against the background */
padding: 20px; /* Adjust padding as needed */
position: relative; /* Add this line to adjust the stacking context */
z-index: 1; /* Add this line to adjust the stacking context */
}

 

And again, like what was reiterated before. This goes at the bottom of your base.css code (atleast if you are using the Dawn theme).

 

Thanks for your help Made4uo-Ribe. You put me in the right direction!

 

Cheers!

Katsby!

Made4uo-Ribe
Shopify Partner
5122 1221 1494

So you mean you didnt used my code? Section I.D is used when your targeting the specific section of the rich text. 

base.css file is not only in the Dawn theme. Its a universal file shopify used for all the css codes but it will change depends on the theme your using. theme.css/style.css/base.css/main.css. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


BKatsby
Tourist
10 1 6

I tried using your code, but it didn't work. You were taking too long to respond, so I went to chatgpt and asked it to generate code that would "Add a background image to a specific Rich Text section". 

 

Understood about the base.css file. I figured it was more widely used than just the Dawn theme. Sorry if I mispoke. I again, am very new to this. I just wanted to give people the solution I found. The code you provided did not do what I needed. It seems like the line of code that helped is the ".rich-text__wrapper {" at the end of the "#shopify-section-template..."

 

Cheers!

Made4uo-Ribe
Shopify Partner
5122 1221 1494

Good then. Sorry for that a lot of people who in need of help in this community and im only volunter.  Im also not in hurry to reply cause there is a lot of good developer in the community. They can give another solution. Important is it solve. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com