[nawilkesParticipant]

I would like to add 50% black opacity to the Rev Slider background image on this page:

http://holywisdom.isthmusdesignstudio.com/land-stewardship/

so the text stands out from the image.

I would like to create a CSS class so I can add the opacity to any slider easily, but I can’t figure it out. How would I do this?

Thanks!
Nick

[ZeshanMember]

Hi Nick,

Thanks for writing in!

You can use following CSS code under Custom > CSS in the Customizer:

#rev_slider_4_1 .tp-bgimg.defaultimg {
    opacity: 0.5 !important;
}

It will only work on the slider of that page.

Thanks!

[nawilkesParticipant]

This works, thank you. However, I’m wondering if there is a way to accomplish something similar without needing to add custom CSS code with each slider instance. Rev Slider has a couple places where you can add a class or ID attribute… I’d like to be able to add a class (e.g. “dark-slide) attribute and have all slides with that attribute have the darkened background. Is this possible? If not, I will have to add each page/slide manually by CSS.

Thanks!
Nick

[ZeshanMember]

Hi Nick,

I don’t think you can add a CSS class to background image of your revolution slider layer. However, if you add a class to the slide itself (see: http://prntscr.com/6w45i5). You can target the background image using following CSS code:

.dark-bg .tp-bgimg.defaultimg {
    opacity: 0.5 !important;
}

Thanks!

[nawilkesParticipant]

That’s perfect. Thank you!

[NicoModerator]

You’re most welcome.

Let us know if you need anything else.

Have a great day! 🙂

[jclay12345Participant]

I couldn’t get this to work, but then found this in case anyone else was interested. http://www.themepunch.com/faq/extend-image-overlay/

[Paul RModerator]

Hi,

Thanks for sharing that. Have a great day!

[Author]

Posts