-
AuthorPosts
-
February 7, 2014 at 8:25 am #12065
J. Michael BParticipantSo, 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

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!
February 7, 2014 at 12:26 pm #12135
KoryKeymasterHey 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!
February 7, 2014 at 10:36 pm #12295
J. Michael BParticipantThis 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!
February 8, 2014 at 2:09 am #12310
RubinKeymasterYou’re welcome!
February 15, 2014 at 9:05 am #14606
J. Michael BParticipantHello! 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!
February 15, 2014 at 6:36 pm #14677
KoryKeymasterHey 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!
February 16, 2014 at 5:40 am #14766
J. Michael BParticipantThanks 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!
February 16, 2014 at 5:58 am #14770
ChristianModeratorYou’re welcome Michael. 🙂
March 27, 2014 at 8:59 am #27101
Silvia CParticipantExcuse 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!
SilviaMarch 28, 2014 at 6:51 pm #27561
KoryKeymasterSilvia,
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!
January 14, 2016 at 7:25 am #745864
kontsir1ParticipantThis reply has been marked as private.January 14, 2016 at 10:58 am #746118
RupokMemberHi @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.
-
AuthorPosts
- <script> jQuery(function($){ $("#no-reply-12065 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>
