Hi everyone, I’ve seen other sites do this a lot and I think it looks really cool. I would like to re-upload my hero banner as a transparent background png and then insert code to add gradient from hex code #606C38 on a 90 degree angle downwards into hex code #283618.
The URL is alcatrazgear.com if you would like to inspect.
Hi @DaveyAlcatraz ,
You can re-upload your image and then follow these steps to make the background a gradient
1, Navigate to Online Store > Themes > Edit Code.
2, Locate and open the theme.liquid file.
3, Paste the code snippet provided below right before the closing head tag, then save your changes.
#mainContent .hero {
background: linear-gradient(90deg, #606C38, #283618);
}
Like this
Here is the result
We hope this assists in resolving the issue.
If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!
Hey, I appreciate your efforts but that didn’t seem to work for some reason. Do I need to add at the start and end?
Yes, you have to wrap the code inside the tags. Sorry about that. Here is the revised code
Hi, my apologies, I’m new to this. Thanks heaps for that.
You’re welcome! 