Solved

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

CMcKimm
New Member
5 0 0

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

Accepted Solution (1)
diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

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;
}

 

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 5 (5)

diego_ezfy
Shopify Partner
2935 562 883

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.

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

CMcKimm
New Member
5 0 0
It changed the opacity but the grey is bleeding onto the white background
beneath the hero image?
diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

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;
}

 

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

CMcKimm
New Member
5 0 0

Perfect thanks so much!

diego_ezfy
Shopify Partner
2935 562 883

You're welcome!

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.