Add color overlay to header images

Support
#1

http://dev.nutrition-connection.com/services/wellness-coaching-nutrition-counseling/

I currently have a class set up with the following code:
.x-section .tint-blue {
background-color:#34a9b3;
opacity: 0.5;
}

I have the .tint-blue class applied to both the header image and the second image on the page (woman at desk) and neither are working properly. It’s applying to the second image, but it seems to be white. And it’s not applying at all to the header image.

Please let me know if you have suggestions!

#2

Hello There,

Thanks for writing in! Do you want something like this?

If that is the case, please follow this steps:
1.) Please remove the tint-blue class in the image element.
2.) You have to add the tint-blue class in the column containing the image instead.
3.) And this you make use of this css code:

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

.x-section .tint-blue:before  {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(52, 169, 179, 0.75); 
}

Please take note that I am using rgba instead of the hex code.

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

#3

Thank you, this worked great for the image in the column. However, I want to apply it to the header image, most importantly. When I apply it to the column with the background image, it overlays the text, and only covers a center band across the image.

Is it possible to code an overlay on a header image like the top one, and also if the parallax is enabled? Thanks in advance!

#4

Hi there,

In the first section, please set its padding to 0. Then apply the padding in your column where tint-blue class is applied. You can add padding: 10px 0px 50px; to your column’s Style input field. It’s the same as adding the padding in the section.

It’s because that blue tint is only limited to the columns dimension, and the image is part of the root section. Hence, it will not really cover the entire image as the section padding pushes the column where the tint is.

Same goes for the parallax section :slight_smile:

Cheers!

#5

Ah, thanks so much. That works well. I didn’t realize it would render differently.

#6

You are most welcome!

#7

I would like to overlay the background image, but not the text element that I have added. How do I do that?

Overlay an image. Leave the text unoverlayed :slight_smile: - hope it is clear what I am trying to achieve?

#8

Hi @tatyana.kozh,

Thanks for writing around! Best option here would be to edit your image in any editing software (e.g Photoshop) and add an overlay so the text shows above.

Hope this helps!

#9

is there a CSS option?

#10

Hey there,

You can try this one:

#x-section-1 {
    position: relative;
}

#x-section-1:before  {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(52, 127, 179, 0.75); 
}

Change x-section-1 with the ID of your section. Hope this helps!

#11

thank you! What do you mean by the following: 'Change x-section-1 with the ID of your section"?
could you please give more details

It looks exactly like the code provided previously.

I need the overlay to be applied to the background image, but not the text

#12

Hey there,

The section where you have a background image, give it an ID for example: overlay-section and then use the above code like this:

#overlay-section {
    position: relative;
}

#overlay-section:before  {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(52, 127, 179, 0.75); 
}

Hope this helps!

#13

this code overlays BOTH the background image and the text!

How can I overlay JUST the background image? I would like the text to come on top.

PLEASE PLEASE read my question carefully, please handover this issue to a colleague if you are unable to help

#14

could you please respond as per my follow up question

#15

Hey there,

Can you please share the URL of the page in question so we can take look? I tested the above CSS on one of our demos and it works perfectly fine, the text shows above the overlay, I’m not sure about your setup. It would be best if you provide a link. Alternatively you can use image editing software to edit image with overlay.

Thanks!

#16
#17

ok, working now :slight_smile:

#18

another question:

on this page:
https://tatyanakozh.staging.wpengine.com/x/#/content/1131

I am trying to overlay only the top section, but it does it to the entire page, why is that?

#19

Hi again,

Please add the following code as well:

#overlay-section {
    position: relative;
}

Cheers!

#20

but it is there… please check