Docs

[threeoten]

Hi, I’m wanting the following transparency to appear over the top of a background image in one section of my page:
background-color: rgba(0,0,0,.5);

I can’t seem to figure out how to get the transparency to appear over the whole background image and I’m not wanting to edit the image in photoshop to achieve this.

Here’s the test page:
http://www.quailsprings.org/QS2/programs/farm-garden/bees-cheese/

Thanks

[Paul R]

Hi,

To achieve that, you can add this under Custom > CSS in the Customizer.

.page-id-6735 #x-section-1 .x-container.max.width {
      background-color: rgba(0,0,0,.5);
      width: 100%;
      max-width: 100%;
}

Hope that helps.

[threeoten]

That does get the overlay on top of the background image! But It also changes the appearance of the section itself. It seems that the above CSS is the same as applying the RGBA style to the Row and setting it to ‘no container’, which I also tried. They both seem to throw off the vertical center of the text on resizing the window, and the left and right margins or padding seem to get taken away. Is there another way to apply the RGBA style that doesn’t change the layout so much? I really liked how I got the text and image to look as the screen resizes and the above solution throws it all off.

Thanks!

[Lely]

Hello There,

I’ve tried different solution. Usually we can achieve that by adding the after pseudo effect in CSS but that will create scroll when you resize the browser.

The best way so far is to add the following in your Cornerstone Edit Page Settings > Custom JS(Right side of CUSTOM CSS):

jQuery(function($){
$( "#x-section-1" ).prepend( "<div class='section-overlay'></div>" );
});

Then add the following CSS via Appearance > Customizer > Custom > CSS

.section-overlay {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
   width: 100%;
  height: 100%;
 
}

Hope this helps.

[threeoten]

THAT did it! Thank you!

Now if I wanted to use this for several similar pages, not just this one, what would I change in order to make that CSS control all of them the same?

[Paul R]

Hi,

You just need to add the code below in Cornerstone Edit Page Settings > Custom JS for every page where you want to add that effect.

jQuery(function($){
    $( "#x-section-1" ).prepend( "<div class='section-overlay'></div>" );
});

Thanks

[threeoten]

I’m just noticing that now that I add more sections below this one, the RGBA overlay seems to cover the the entire page – all sections. How can I make it just overlay the top section? See here:
http://www.quailsprings.org/QS2/programs/

Thanks

[Paul R]

Hi,

Kindly replace the javascript code with this.

jQuery(function($){
    $( "#x-section-1" ).wrapInner( "<div class='section-overlay'></div>" );
});

Then replace css code with this.

.section-overlay {
  background-color: rgba(0,0,0,.5);
   width: 100%;
  height: 100%;
 
}

Hope that helps.

[threeoten]

That’s the one! Thanks for all your help!

[Lely]

You’re welcome!

[threeoten]

Hi, I’m suddenly having some issues with the above code that Staff provided in post #319233. I’ve been using it for some time on my pages, but now it doesn’t seem to be working on certain pages. I’m using the same code on each in the custom Java section of each cornerstone page. The css is in my Customizer. Examples below

Working:
http://www.quailsprings.org/programs/permaculture/pdc/

Not working:
http://www.quailsprings.org/programs/permaculture/social-permaculture/

[John Ezra]

Hi there,

Thanks for updating the thread! Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[threeoten]

This reply has been marked as private.

[Jade]

Hi there,

Please try to add an ID for the section that you want to add the overlay class on to x-section-1 since the Javascript will target the page elements with the ID x-section-1.

Hope this helps.

[threeoten]

I never had to do that before and it worked just fine using the advice above from Staff in post #319233. Why would it suddenly stop working?

On this page: http://www.quailsprings.org/programs/permaculture/pdc/ I added x-section-1 (also tried #x-section-1) to the first section like this: http://screencast.com/t/ZDzlifGEAp and nothing changed.

[Author]

Posts