Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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)
/* 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!
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!
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"');
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
Choose Files
Upload the files fomr the computer.
When Upload finish copy link and paste on the code.
Example:
And Save.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
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
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!
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
Oh, I thought thats a banner. Would you mind to share the preview of the theme where you add the code? Thanks!
Not a banner, no. Its my Home Page, and its a "Rich Text" block in the "Template" section. https://i.imgur.com/7A6kOfS.png
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!
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)
/* 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!
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.
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!
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!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025