Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #12065
    J. Michael B
    Participant

    So, I’m using a parallax photo in a Content Band and for the life of me can’t figure out how to add a color overlay with opacity.

    I’ve added a new custom class of coverlay and then added this to Style (inline CSS):

    .coverlay { background-color: #000000; background-image: url("http://n.local/wp-content/uploads/2013/12/parallax_001.jpg"); opacity:0.5; }

    IMAGE EXAMPLE #001

    Image Example #001

    The problem I keep running in to is that the opacity changes the entire Content Band.

    Any suggestions or guidance would be greatly appreciated!

    P.S. Just got back from vacation and looking to jumping right back in the mix! Y’all have been kicking butt – keep it up!

    #12135
    Kory
    Keymaster

    Hey Michael,

    Thanks for writing in and it’s great to hear from you again! 🙂

    It looks like you’re doing things locally, so I’m guessing we can’t get a link to your installation. Honestly, if at all possible the easiest thing would probably to open the photo you want as your background in Photoshop and apply a Gradient Map to it to give it the overlay feel you want (or a solid color layer with opacity).

    If you’re determined to do this with CSS, something you could try is using a :before or :after pseudo-element on the container element within you Content Band. Something like this should work (using your class that you’ve given to your Content Band):

    .coverlay {
      position: relative;
    }
    
    .coverlay .x-container-fluid:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #000;
      opacity: 0.5;
      filter: alpha(opacity=50);
      zoom: 1;
      z-index: 0;
    }

    You could then change the background-color and opacity values to something that suits your needs. Let us know how this works out for you!

    #12295
    J. Michael B
    Participant

    This worked absolutely perfectly. I wanted to stay clear of adding changes directly to the images, as I plan to use a lot of the parallax and other design photos throughout the site and am looking to achieve different look for each location. This option keeps me from having to upload multiple images.

    Thanks!

    #12310
    Rubin
    Keymaster

    You’re welcome!

    #14606
    J. Michael B
    Participant

    Hello! So, I hate to dig this one up again, but after the update it doesn’t seem to be working anymore. It has reverted to adding the opacity to every element in the container, instead of just the color.

    Any suggestions?

    Here's the code that I have:
    
    /*****************************/
    /*! ADD COLOR OVERLAY BLACK  */
    /*****************************/
    
    .coverlayblack {
      position: relative;
    }
    
    .coverlayblack .x-container-fluid:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #000;
      opacity: 0.5;
      filter: alpha(opacity=50);
      zoom: 1;
      z-index: 0;
    }
    
    /*****************************/
    /*! ADD COLOR OVERLAY BLUE   */
    /*****************************/
    
    .coverlayblue {
      position: relative;
    }
    
    .coverlayblue .x-container-fluid:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #36beeb;
      opacity: 0.5;
      filter: alpha(opacity=50);
      zoom: 1;
      z-index: 0;
    }

    Again, you guys are awesome and thank you for the support!

    #14677
    Kory
    Keymaster

    Hey Michael,

    Thanks for writing in! Could you be more specific on the problem you’re experiencing of provide us with some screenshots of this? I just tried this out myself and everything appears to be working as expected. Nothing in the theme should be causing a change in this, and since the opacity is applied to an element other than the parent container itself, it shouldn’t be getting applied to children.

    Thanks!

    #14766
    J. Michael B
    Participant

    Thanks for getting back to me. No need, the problem seems to have corrected itself … or a certain someone made a rookie mistake in updating their site content. 😉

    Either way, thanks for the support!

    #14770
    Christian
    Moderator

    You’re welcome Michael. 🙂

    #27101
    Silvia C
    Participant

    Excuse me guys,
    is it possible to achieve the same result (contenta band bg image a little transparent or with opacity, as you call it, so that the texts stands out better) without creating a custom css style (which I don’t know how to do)?
    My website is http://pantarei.wpengine.com and I’d like to insert a little content band on the home page with an explanation of what the site is. Unfortunately, the bg photo (that I cannot change ’cause it’s the same as on facebook page so it’s very known by now) is a little too dark or with too dark colours for the text to be well readable. I tried the easiest thing: change the text color, but it doesn’t look like a solution. The ideal thing would be to have that background image a bit transparent or opach…
    Thanks a lot indeed!
    Silvia

    #27561
    Kory
    Keymaster

    Silvia,

    Are you trying to achieve an overly as this thread is about, or apply some opacity to your background image? If you are trying to apply opacity directly to your background image, regretfully that is not possible as you cannot do this with background images and CSS. You will either need to apply the opacity yourself via a program like Photoshop to use, or utilize the method outlined in this thread as mentioned above. All of the code is provided and is quite easy to implement with a little time.

    Thanks!

    #745864
    kontsir1
    Participant
    This reply has been marked as private.
    #746118
    Rupok
    Member

    Hi @kontsir1

    Thanks for updating the thread although it’s pretty old and seems not related with your issue! If you face any issue on future, kindly open a new thread instead of hacking other user’s thread. This is to keep the forum clean and useful for others with updated content.

    However, regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

    Thank you for your understanding.

  • <script> jQuery(function($){ $("#no-reply-12065 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>