[Resolved] text in sections with background images

[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?

[Tom]

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;
}

[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

[dinkummate]

oops Tom, it works now… great! Sorry!

Thank you so much

[Tom]

You’re very welcome 🙂

[Author]

Posts