Added an image to background but now all containers have changed too?

Solved

Added an image to background but now all containers have changed too?

makersquarter
Tourist
6 0 2

Hello! I've used this code, found from another question on here, to change the background of my site to an image. It has worked, but now all of my containers also have that image too, and I can't seem to change them to just have solid colour. Any ideas or advice greatly appreciated! 

 

Code used:

.gradient { background: var(--gradient-background);

background-attachment: fixed;

background-image: url(https://cdn.shopify.com/s/files/1/0874/2659/7195/files/DFD6C2.png) !important;

background-color: transparent !important;

background-position: top left !important;

background-size: auto !important;

}

Accepted Solution (1)
Mehedi06
Shopify Partner
27 3 4

This is an accepted solution.

Okay, then keep the `gradient` class on the body. But, when you don't need this class, you need to pick the section by yourself from the code and remove the `gradient` class from there. Like here, the section you mentioned has the `gradient` class. If you remove the class from this section, you can see the section looks like this.

Mehedi06_0-1727952975043.png

Mehedi06_1-1727953028262.png


This is a general solution for you where you need to remove this class from the code manually from the code.

View solution in original post

Replies 12 (12)

Mehedi06
Shopify Partner
27 3 4

Here, you have used a class `gradient` to change the background to an image. I think, you have used this same class to other containers too or, you haven't particularly add this class to a specific container. 
That is why all of the containers are getting the same image. 

If you can share your store url's here, I can take a look. 

makersquarter
Tourist
6 0 2

Thank you! Here's the url : https://80aeae-da.myshopify.com/

Mehedi06
Shopify Partner
27 3 4

I can't see your store preivew without the password. You can find this password inside your 'preference' tab. 

Mehedi06_0-1727951806150.png

 

makersquarter
Tourist
6 0 2

Password: dowska

Mehedi06
Shopify Partner
27 3 4

I'm not sure, which sections/blocks are you talking about? Can you indicate which section do you want to show a background and in which you want solid color as background?
@makersquarter 
But, I can see that you've used the 'gradient' class at the body portion. That is why your whole page is showing this particular background. Let me know where you want to add this background? I will indicate you from the browser element.

Mehedi06_0-1727952331356.png

 

 

makersquarter
Tourist
6 0 2

I would like the image to be across the background of all pages, but I don't want it to also be the background of the containers eg. in the screenshot added below, the box around 'kolab concept store' should be white but has changed to the image as well when adding the code. 

 

Screenshot 2024-10-03 at 10.54.35.png

Mehedi06
Shopify Partner
27 3 4

This is an accepted solution.

Okay, then keep the `gradient` class on the body. But, when you don't need this class, you need to pick the section by yourself from the code and remove the `gradient` class from there. Like here, the section you mentioned has the `gradient` class. If you remove the class from this section, you can see the section looks like this.

Mehedi06_0-1727952975043.png

Mehedi06_1-1727953028262.png


This is a general solution for you where you need to remove this class from the code manually from the code.

makersquarter
Tourist
6 0 2

Sorry, I'm looking to have it the other way round. So the background of the whole website is the textured image, and the box with 'KOLAB Concept Store' is white. Could you let me know how to do this, please? Thanks

makersquarter
Tourist
6 0 2

Problem solved, thank you so much for your help. I went into the specific section I needed (in this case, 'image with text') and removed the gradient, as you said. 

Mehedi06
Shopify Partner
27 3 4

@makersquarter Great! So, can you make this post solved to my answer please? Thanks.

Mehedi06
Shopify Partner
27 3 4

I'm a bit confused. Did you see my last reply? There you see that I've only added the white background to the 'KOLAB Concept Store' by removing the 'gradient' class from the section.

I can give you a temporary solution though. 
1. Go to 'Edit code' and find 'theme.liquid'.
2. Find the '.section-template--23583896174923__image_with_text_BKLGqz-padding' class from theme.liquid.
3. Add this 'background-image: none!important;' line to the class.

Mehedi06_0-1727954617620.png

 

This will only remove the textured background from this section for now. But, this is not a general good solution. 
Cause, I can't give you a solution just to see the elements. This things need to be fixed from the code. If you can able to write/update code, I would suggest you to find the section and remove the 'gradient' class from that section. Then, you can add the class to any element you like and vice versa. Thanks.

Made4uo-Ribe
Shopify Partner
8858 2118 2602

Hi @makersquarter 

This code is for all the store area, which section or specific location you like to add this background? If its not for the password page please provide also the password. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.