How to replace this hero banner background to improve resolution?

[DaveyAlcatraz]

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.

[BSS-TekLabs]

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!

[DaveyAlcatraz]

Hey, I appreciate your efforts but that didn't seem to work for some reason. Do I need to add <style> at the start and end?

[BSS-TekLabs · Accepted solution]

Yes, you have to wrap the code inside the <style> tags. Sorry about that. Here is the revised code
 

<style>
#mainContent .hero {
    background: linear-gradient(90deg, #606C38, #283618);
}
</style>

[DaveyAlcatraz]

Hi, my apologies, I'm new to this. Thanks heaps for that.

[BSS-TekLabs]

You're welcome! 😊