Color Overlay on Background Image

Support
#1

Hello!

I’m trying to add a dark overlay over this image. Not too dark that it can’t be seen, but dark enough that the text can be read. I don’t have the PRO plan so the tutorials I found on this didn’t help. I tried adding different codes to the CSS but it hasn’t worked either. I’m not sure what I’m doing wrong or missing.

My website is www.crisisequipped.com

Thank you so much!
-Nadia

#2

Hi There,

Thank you for writing in, you can actually do that overlaying background-color thing in X. The V2 Section offers you that option.



Please create a new section just below what you have now, and moved all your elements in the new section. Set the image as the Lower Layer background and the Dark overlay color as the Upper Layer background

What you have now is the Classic Section, that is why you don’t have the advance background option.

Hope that helps,
Cheers!

#3

Hello!

I tried to do what you recommended but it does not give me the Lower Layer and Upper layer background options. I created a new section, moved the text to it and these are the options I’m given:

What am I doing wrong?
Thanks so much for your help!!

#4

I realized that I need the PRO theme in order to do this, which I don’t have.
What code can I add in CSS that would give me a darker overlay?

Thanks so much!
-Nadia

#5

Hi Nadia,

First, you will need enable advanced mode under Cornerstone settings. Then you should see those additional options.

Also I see that you’re not fully updated. You can check the latest version numbers of X and Cornerstone from here (https://theme.co/changelog/) and update accordingly.

Thanks!

1 Like
#6

Perfect! Thank you! I got the color overlay settings to work. One last question about the image… how do I make it parallax (where it’s more noticeable)? If you see my home page (www.crisisequipped.com) you’ll notice I left the original image (without overlay) and the new one (with overlay) above it. I want the parallax effect to look like the original image. Do you see the difference I mean?

I’m figuring out how to do the update of X/Cornerstone, but first I need to backup my site. Thanks for the heads up!

#7

This is a picture of my settings. When the lower layer size is at 100% there is no parallax effect. When I increase the percentage, the image narrows in on the center (cutting off the top and bottom) and barely does a parallax effect.

Thanks so much for your help!

#8

Hi Nadia,

You can try increasing your Lower Layer Size

Try increasing it to 200%

Hope that helps

#9

I did that, but look at my website again. The image is zoomed in so it cuts off the little girl in the bottom left corner. How can I keep parallax effect and the full image size at the same time?

Thanks for your help :slight_smile:

#10

Hi Nadia,

That is just how the parallax background behaves, it scrolls down simultaneously when you’re scrolling the page.

Although the speed of scrolling on the Classic Section and V2 Section is not the same.

Please use V2 Section to get the parallax effect of this section



Thanks,

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.