Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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;
}
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.
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;
}
Perfect thanks so much!
You're welcome!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024