[TimmidParticipant]

Hello i’m back with another question,

I’m trying to add a blue color overlay to my video background with some opacity so that the text over the video is easier to read. And it would be great if i could have different settings or no color on other pages.

I’ve been searching the forum, trying some CSS tips, but I can’t figure it out.

http://club-van-100.nl/website/

Thx!

[ZeshanMember]

Hi there,

Thanks for writing in!

Please add following CSS under Custom > CSS in the Customizer:

.home #x-section-1 .x-video.player.bg:before {
    content: '';
    background: rgba(39, 69, 145, 0.44);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.home #x-section-1 .x-video.player.bg + .x-container {
    position: relative;
    z-index: 10;
}

This will only be applied on the homepage.

Thanks!

[TimmidParticipant]

Works great thx.

How can i edit the code if i want to use it on an other page with maybe an other color or less opacity?

thx in advance.

[FriechModerator]

Hi There,

If you want to apply this on other pages, you need to remove the .home on the selector. To change the background color you can update the rgba value with this table. The last value there (0.44) is the alpha which is the opacity of your background colour.

e.g.
background: rgba(0, 128, 128, 0.5); /*this would result to an light semi-transparent blue*/

Hope this shed some lights, Cheers!

[TimmidParticipant]

Thx for the help!

[ZeshanMember]

You’re welcome! 🙂

[TimmidParticipant]

Hello X Theme Staff,

On the home page of the site I now have the video background with a semi-transparent blue overlay. On the other pages I would like to have a background image. How can i apply the same semi-transparent blue overlay over the background images?

Thx in advance!

[ZeshanMember]

Hi Timmid,

For that, you can add a CSS class for example blue-overlay to your section and following CSS code under Custom > CSS in the Customizer:

.x-section.blue-overlay {
    position: relative;
}

.x-section.blue-overlay:before {
    content: '';
    background: rgba(39, 69, 145, 0.44);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: block;
}

.x-section.blue-overlay .x-container {
    position: relative;
    z-index: 10;
}

Thanks!

[TimmidParticipant]

Works great. Thx!

[ThaiModerator]

You’re most welcome.

[mirandanashParticipant]

Hello, I used the strategy above to get a black-overlay on my content_band, but now I want to apply the black-overlay class to the main page of my site which uses rotating background images as specified here:

How do I do that?

[LelyModerator]

Hello There,

Thanks for updating the thread. To apply that on your homepage rotating image background, please add the following via Appearance > Customize > Custom > CSS

.home .backstretch:before {
  content: '';
  background: rgba(39, 69, 145, 0.44);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
}

Hope this helps.

[emileParticipant]

hello,

the technique mentioned above (#329885) works well to add an overlay to the whole section, image and text included. is there a way to only apply the overlay to the background? I want the H1 to still be white, not with the overlay over it.

thanks!

[RupokMember]

Hi @emile

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[Author]

Posts