Overlay transparent color over background image – Themeco Community

Overlay transparent color over background image

threeoten — Wed, 01 Jul 2015 01:49:34 +0000

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

Reply To: Overlay transparent color over background image

Paul R — Wed, 01 Jul 2015 08:08:41 +0000

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.

Reply To: Overlay transparent color over background image

threeoten — Wed, 01 Jul 2015 17:15:49 +0000

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!

Reply To: Overlay transparent color over background image

Lely — Wed, 01 Jul 2015 22:18:04 +0000

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( "" );
});

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.

Reply To: Overlay transparent color over background image

threeoten — Wed, 01 Jul 2015 22:38:10 +0000

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?

Reply To: Overlay transparent color over background image

Paul R — Thu, 02 Jul 2015 05:08:56 +0000

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( "" );
});

Thanks

Reply To: Overlay transparent color over background image

threeoten — Thu, 02 Jul 2015 05:16:39 +0000

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

Reply To: Overlay transparent color over background image

Paul R — Thu, 02 Jul 2015 13:14:53 +0000

Hi,

Kindly replace the javascript code with this.


jQuery(function($){
    $( "#x-section-1" ).wrapInner( "" );
});

Then replace css code with this.


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

Hope that helps.

Reply To: Overlay transparent color over background image

threeoten — Thu, 02 Jul 2015 16:30:29 +0000

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

Reply To: Overlay transparent color over background image

Lely — Thu, 02 Jul 2015 22:12:51 +0000

You’re welcome!