Add color overlay to header images

Support
#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

#21

Hi there,

I checked the page and it isn’t there, If it was there everything would have worked fine. Please add the above code in your Child Theme instead. Also make sure to clear all the cache as well.

Thanks!

#22

https://tatyanakozh.staging.wpengine.com/x/#/content/1131/layout

please try now - I really want it to work, but it does not

#23

Hi there,

That’s strange, I checked your setup including Child Theme’s style.css file and I could not find the code any where, when I paste the code in your Child Theme everything starts to work just fine (see screenshot)

First make sure you’ve the code in your Child Theme. If you’ve the code in your Child Theme then this could be due to the cache which is preventing the changes to take place on the front-end. Try clearing all the cache first and if your host is caching the content then ask them to clear it for you.

If the issue persists then create a new thread with your credentials including username. I see you’ve shared password in couple of posts using a secure note. Please note that Secure Note is visible to the original poster, the topic owner, and staff. I’m removing your secure notes for security purpose and I’d suggest you to change the credentials immediately and then create a new thread and provide the credentials so we can take a closer look.

Thanks!

#24

apologies, I am not ver advanced. How do I clear the cache?

#25

Hey there,

Can you please create a new thread including the credentials in a Secure Note so we can take a look?

Thanks!