Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1252770

    Hi,
    I have an image background on a page and want to add some text over it. Is there any way to add a translucent colored layer behind my text so I can both preserve the background image and control the text visibilty over it?

    Tnhanking you in advance for your help.

    #1252853

    Hey Joagin,

    This should be possible via css. Please provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    #1252977
    This reply has been marked as private.
    #1253240

    Hi,

    Thanks for that. We can’t view local installations, but if you give the text in question a class in the element options, then you can target it with CSS like this:

    .your-class {
      background: rgba(0, 0, 0, 0.5);
    }

    Best regards,
    Rikard

    #1258033

    Hi Rikard,
    Thanks for your reply.
    (let me advise you I know very little of code…)

    So I gave the text ( in this case a headline rotator) the class “titulo” and tried to add the code you provide in front of it but nothing really happens. I save it, updoad the page and the page keeps the same. When I go back to the advance layout editor the added code I copied from you is gone again like this:

    [av_headline_rotator before_rotating='Missão' after_rotating='' margin='' margin_sync='true' align='left' custom_title='#ffffff' size='4vw' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' tag='h1' interval='5' animation='' alb_description='' id='' custom_class='titulo.{
    background: rgba(0, 0, 0, 0.5);
    }' av_uid='av-kgaophm9' admin_preview_bg=''][/av_headline_rotator]

    What am I doing wrong? Also it looks to me the code language you provided is not the same that the one I have on the shorcode, no?
    Can you help me on this issue?

    Kind regards,
    Joana

    #1258509

    Hi Joana,

    Don’t add the CSS in the shortcode. First add the class in the Advanced tab in the element options, then you add the CSS to Quick CSS under General Styling in the theme options panel.

    You might have to target the spans in the headline rotator like this:

    .your-class span {
      background: rgba(0, 0, 0, 0.5);
    }

    Best regards,
    Rikard

    #1258831

    Thank you so much Rikard!
    It worked just fine (no need for targeting the spans!)
    Great I’m coding :) the sky is the limit now :D

    #1258973

    Hi,
    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.