How can I add a dark overlay to my slide homepage image?

Store Design
1

hi, im just wondering if i could add a dark overlay on my slide homepage

https://cartridgesrefills.co.nz/

Thanks

2

Good Afternoon,

If you’re not sure how to find your stylesheet, please have a look at this article: https://getshogun.com/learn/edit-css-shopify#:~:text=To%20find%20your%20CSS%20file,access%20the%20Shopify%20source%20code.

Add this css to the bottom of your stylesheet:

#shopify-section-16039458302efd4492 .single-banner.lazyloaded:before {
    background-color: #000;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    opacity: .3;
}

You can play with the opacity to make it lighter or darker. 1 is full black, 0 is full transparent.

You can also swap the background color #000 with a different hex code if you want to change the shade a bit.
Here is a hex code generator I found online: https://www.w3schools.com/colors/colors_picker.asp
(You want the one that has a pound symbol in the front)

Hope this helps!

-Justin

3

well here is a site that can teach u about color , hope u enjoy it…color codes