Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] text in sections with background images

Home Forums Support text in sections with background images

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #163600
    dinkummate

    Hi there,

    I want to use sections with background images. To make the text readable, it would need an extra background for the text with an opacity effect. Is there any solution for that?

    #163630
    Tom
    Lead Developer
    Lead Developer

    You could wrap the text in a div like this:

    <div class="my-transparent-div">
       My content in here
    </div>

    Then add some CSS for that div:

    .my-transparent-div {
        background-color: rgba(0,0,0,0.3); /* black with 30% opacity */
        padding: 20px;
    }
    #163633
    dinkummate

    Hi Tom, that works great (almost) but the background image is cut so the parallax effect is weird, means half of the scrolling the image is repeating.

    I did adjust the css to my needs, totally possible it is wrong.

    .my-transparent-div {
    background-color: rgba(255,255,255,0.7); /* black with 70% opacity */
    padding: 20px;
    }

    The text effect is there as wished, just the background yahhh I dunno 🙂

    Thank you so far

    Andreas

    #163634
    dinkummate

    oops Tom, it works now… great! Sorry!

    Thank you so much

    #163635
    Tom
    Lead Developer
    Lead Developer
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.