Adding opacity to background image and other divs/wrappers

jcruz2016

Hi there please help!

I added a background image:

#mainwrap {
background: url(https://sanjorgeecolodges.com/images/SJT/San-Jorge-Tandayapa-Landscape.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}

I need to reduce the opacity of the above image.

Also, after adding this image as a background I notice that I need to reduce the opacity of other divs such as breadcrumps? and footerwrap? (they have a solid #212121 color) in order for the backgroud image to be seen underneath.

Thankyou

Ninja

jcruz2016
Hi
the image is apply on the main content DIV so the opacity
opacity: 0.8; will apply on the full content or you add an BG image that already has opacity on its image so there is no need to apply and it will work normal. about the footer part its different section and BG image will not work as its applied only for the main content
http://prntscr.com/x31zlp

jcruz2016

Ninja Dear Sir. For the footer and breadcrump section what do you recomend me to do in order to reduce the transparency?

Ninja

jcruz2016
Hi
The BG image is applied on the Mainbody only it would not work on footer in any way as it is diffeerent block.
Here is style code

#footerwrap {
    background-color: #000;
    position: relative;
    color: #fff;
}

You can customize for footer area.

jcruz2016

Are you trying to say there's nothing I can do to make the breadcump div transparent? Thanks
@pankaj#143073

Ninja

jcruz2016
Hi
use this code in custom.css

#abovewrap .zen-spotlight {
    background-color: transparent;
}