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;
}
1 Like
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.
I can’t see your store preivew without the password. You can find this password inside your ‘preference’ tab.
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!
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.
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.
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.
This is a general solution for you where you need to remove this class from the code manually from the code.
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
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.
1 Like
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.
- Go to ‘Edit code’ and find ‘theme.liquid’.
- Find the ‘.section-template–23583896174923__image_with_text_BKLGqz-padding’ class from theme.liquid.
- Add this ‘background-image: none!important;’ line to the class.
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.
@makersquarter Great! So, can you make this post solved to my answer please? Thanks.
