Solved

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

MINHOJI
Excursionist
29 0 0

1234.jpg12345.PNG

 

 

 

 

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.

Accepted Solution (1)
BSS-Commerce
Shopify Expert
3465 460 515

This is an 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?

view - 2024-01-09T141757.426.png 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 7 (7)

BSS-Commerce
Shopify Expert
3465 460 515

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

MINHOJI
Excursionist
29 0 0
BSS-Commerce
Shopify Expert
3465 460 515

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

MINHOJI
Excursionist
29 0 0

<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
Shopify Expert
3465 460 515

This is an 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?

view - 2024-01-09T141757.426.png 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

MINHOJI
Excursionist
29 0 0

Thank you so much.

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

God Bless You!

MINHOJI
Excursionist
29 0 0

I left a wrong comment