How to change/add transparant layer on hero image so text stands out (Debut)

Store Design
1

The text on the homepage banner is not popping/hard to read. How can I adjust the transparency/overlay on the hero image so the text pops? I don’t necessarily want it to impact other image with text overlay boxes on the rest of the page/site.

https://sleepinharmony.com.au/

Thanks

2
  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
.hero--medium:after{
    content: '';
    background: #737373;
    position: absolute;
    z-index: 0;
    opacity: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
}

You can adjust the last code 0**.3** to anything you like. For instance, if you want it to be darker, use this:

opacity: 0.7;

It ranges from 0.01 to 1.00.
Let me know whether it works.

3

It changed the opacity but the grey is bleeding onto the white background
beneath the hero image?

4

Delete the previous code and update with this:

.hero--medium{
    overflow: hidden;
}

.hero--medium:after{
    content: '';
    background: #737373;
    position: absolute;
    z-index: 0;
    opacity: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
}
5

Perfect thanks so much!

6

You’re welcome!