Navigation
Archive / Text over background image with color overlay
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • January 9, 2017 at 3:58 pm #1323008
    CarolynnM
    Participant

    I have created a 3 column section which each contain a separate background image. I have also added a transparent color overlay to each image.
    I have added a custom headline to each section but it is appearing under the color overlay.
    How do I get it on top?

    January 9, 2017 at 4:05 pm #1323015
    CarolynnM
    Participant

    Here is a screen shot of my site.

    January 9, 2017 at 9:22 pm #1323338
    Jade
    Moderator

    HI there,

    Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

    January 9, 2017 at 9:49 pm #1323370
    CarolynnM
    Participant
    This reply has been marked as private.
    January 10, 2017 at 1:32 am #1323528
    Friech
    Moderator

    Hi There,

    Thanks for credentials. Opacity affects the content of the container so instead of applying an opacity to the color-overlay1:before class. Use an rgba value for your background-color instead.

    e.g.
    background-color: rgba(255, 204, 79, 0.6);

    Hope it helps, Cheers!

    January 10, 2017 at 2:16 pm #1324441
    CarolynnM
    Participant

    Hi, I have just tried this and it has not solved the problem.
    The Custom Headline is still underneath the color overlay.
    I also can’t select the headline to edit it from the main customiser view and have to go to outline view to do this (see attached screenshot)

    January 10, 2017 at 8:48 pm #1324938
    Friech
    Moderator

    Hi There,

    Yes, you’re right the custom headline is behind the color overlay that is also the reason we cant click it.
    Please add this on your custom CSS

    .color-overlay1 .h-custom-headline, 
.color-overlay2 .h-custom-headline, 
.color-overlay3 .h-custom-headline {
	position: relative;
}

    Hope this solve both issue, Cheers!

    January 10, 2017 at 10:24 pm #1324989
    CarolynnM
    Participant

    Yes, this has worked. Thank you!

    January 11, 2017 at 12:03 am #1325075
    Prasant Rai
    Moderator

    You are most welcome. 🙂

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