• applies to content because opacity is applied to the wrapper instead of using rgba for the background color. Opacity should not be applied to the content of the banner.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Ketan Patel

    (@patelketan)

    Hello,

    Thanks for reaching out to us…

    Can you please share the website link and explain the screenshots within your issue…

    Thanks,

    Thread Starter John Huebner

    (@hube2)

    Page on site with issue https://www.rudyschmid.com/vehicle-maintenance/rust-proofing/

    Here is the HTML generated by this plugin:

    <div class="hbupro-hero-banner-wrp-1 hbupro-clearfix hbupro-layout-2">
      <div class="hbupro-hero-banner hbupro-clearfix">
        <div class="hbupro-hero-banner-inner hbupro-clearfix">
          <div class="hbupro-hero-banner-inner-wrap">
            <div class=" hbupro-medium-12 hbupro-columns hbupro-hero-content-position hbupro-text-center">
              <h2 class="hbupro-hero-banner-title">Rust Proofing for Your Vehicle</h2>
              <div class="hbupro-hero-banner-sub-title">
                <p>Keep Rust at Bay on Your Car in CNY's Unpredictable Weather</p>
              </div>
              <div class="hbupro-hero-banner-links">
                <a class="hbupro-button hbupro-rudy-dark-red" >FAQs</a>
                <a class="hbupro-button hbupro-rudy-dark-red" >Contact Us</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    And here is the CSS

    <style type="text/css">
      .hbupro-hero-banner-wrp-1 .hbupro-hero-banner {
        background-image: url(https://www.rudyschmid.com/wp-content/uploads/2020/06/DSC04593-2-scaled.jpg); 
        background-size:cover;
        background-position: 50% center;
        background-attachment: fixed
      }
      .hbupro-hero-banner-wrp-1 .hbupro-hero-banner .hbupro-hero-banner-inner {
        background-color:#b72a2a;
        opacity:0.4;
      } 
      .hbupro-hero-banner-wrp-1 .hbupro-hero-banner-inner-wrap{
        max-width: px;
      }
      .hbupro-hero-banner-wrp-1 .hbupro-hero-banner h2.hbupro-hero-banner-title {
        font-size: 30px !important;
        line-height: 30px !important;
        color:#fff
      }
      .hbupro-hero-banner-wrp-1 .hbupro-hero-banner .hbupro-hero-banner-sub-title p,
      .hbupro-hero-banner-wrp-1 .hbupro-hero-banner .hbupro-hero-banner-sub-title {
        font-size: 20px !important;
        color:#fff
      }
      .hbupro-hero-banner-wrp-1 .hbupro-hero-banner-inner {
        padding:150px 0px 150px 0px
      }
    </style>

    As you can see the the content (title, subtitle, ect) is contained by the element with the selector:

    .hbupro-hero-banner-wrp-1 .hbupro-hero-banner .hbupro-hero-banner-inner

    This element is set to an opacity of 0.4 as defined in the overlay opacity when creating this banner. Because the entire element is set to this opacity all of the elements that it contains are also set to this opacity, making the text semi-transparent. It is not possible to set the inner elements of a container to higher opacity than the container.

    To correct this either 1) the text cannot be contained in the overlay element or 2) an RBGA color value must be used for the background color of the overaly instead of setting the opacity of the entire overlay container.

    Transparent text is not the desired result, only a semi-transparent overlay of the image is the desired result.

    • This reply was modified 1 year, 4 months ago by John Huebner.
    Plugin Contributor Ketan Patel

    (@patelketan)

    Hello,

    I think you want to remove overlay color and opacity.

    https://prnt.sc/HhD0fGLeUtRe

    Thread Starter John Huebner

    (@hube2)

    This is not really what I was looking for as it means that the overlay color will need to be applied to the background image before uploading, this is not something that my clients will be able to do easily. It also means that the overlay settings in this plugin are a completely useless feature.

    Even an addition of some type of filter hook in an update that would let me correct the inherent problem would be a step in the right direction.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘background overlay opacity’ is closed to new replies.