How can I add different colors to text in homepage background images?

[MINHOJI]

With the help of the community, we succeeded in putting the image in the background of the homepage.

But the images were all in the background. I want to put different colors in the text-containing images, multiple rows.

I'd appreciate your help.

[BSS-Commerce]

Hi @MINHOJI ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[MINHOJI]

https://thesmeti.com/

thank you

[BSS-Commerce]

Can you kindly share the details of your problem (screenshot/ record) with us? We will check it and suggest you a solution if possible.

[MINHOJI]

<style>
.gradient {
background-image: url(https://th.bing.com/th/id/OIG.gdeWdR6VrfeujwVW5_Pm?pid=ImgGn);
background-size: cover;
}
</style>

I put this code in and put the image in the background of the homepage.

But I don't want this image to be in the check box, but I want the color to be in.

[BSS-Commerce · Accepted solution]

Hello, it seems I understand what you mean. Please reopen the code you added and edit the old code as follows (replace, not add):

<style>
body.gradient.animate--hover-default {
    background-image: url(https://th.bing.com/th/id/OIG.gdeWdR6VrfeujwVW5_Pm?pid=ImgGn); 
    background-size: cover;
}

.header-wrapper.color-accent-1.gradient,
.utility-bar.color-background-2.gradient,
.color-inverse.gradient,
.color-accent-1.isolate.gradient,
.multirow.section-template--17242443415795__a59593d1-e6ec-4516-87af-1ede67dbf02e-padding.gradient.color-inverse ,
.section-template--17242443415795__image-with-text-padding.gradient.color-inverse{
    background:transparent!important;
}
</style>

Is this the result you want?

 

[MINHOJI]

Thank you so much.

I had a hard time for a long time, but I solved it thanks to you.

God Bless You!

[MINHOJI]

I left a wrong comment