Docs

[Lance C]

In searching the forums, I found out how to do with a slide in Rev slider, but not sure how to do it outside of that?

When I add opacity: 0.5 !important; it applies it to the whole section.

How can I apply to just the background image?

Thanks for any help!

[Rahul]

Hello,

Can you give us link to live page where you are testing this? It’d be easier for us to investigate.

Thanks.

[Lance C]

This reply has been marked as private.

[Lance C]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! When you set an image as a background image, the only way you can have the opacity is within the image itself. I would highly recommend that you use .png image because this is the only format that has some opacity. On the other hand, you can add a darker overlay to your background image instead. This is helpful especially if your background image make your text unreadable. To do this, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

#about {
    position: relative;   
}

#about:before {
    content: "";
    display: block;
    background-color: rgba(0,0,0,0.65);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

Hope this helps. Please let us know how it goes.

[Lance C]

Thanks for the CSS Rue, it worked!

[Thai]

You’re most welcome 🙂

[Lance C]

Rue – one thing the CSS has caused however, is that it has added an unwanted dark background effect to the accented text headline…How can I remove that?

Please see attached image, Thanks

[Lance C]

Well, as a test, I removed that custom headline, then re-added it, and the black background seems to have gone away.

Strange!

[Joao]

Hi Lance,

Let us know if we can help you with anything else.

Joao

[Author]

Posts