How can I control opacity on background images

Support
#1

I would like to have have a background image transparent and text over it.
I have tried various CSS code but none works the way I want. The closest faded the image AND the text. Is there any way to do this??

#2

Hi,

Thank you for writing in!

You can check this link: https://www.w3schools.com/css/css_image_transparency.asp and add the custom CSS code to X > Launch > Options > CSS

#3

Thats great except I cannot seem to work out how to NOT have the text transparent as well.
Is there more CSS for that?
I used
div.courthouse{
opacity: 0.3;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
So the class of the background image was “courthouse” and no class in the text box.
The code I put into the additional CSS section of customise.

#4

Hi There,

Could you please send us with the page link which you’re working so we can take a closer look?

Thanks.

#6

link is dunedinsegwaytours.com/seg

#7

the page is T & C

#8

Hi again,

You’ve given a class to the section and applied opacity on it. Everything inside this section will become transparent. Since opacity affects the whole element including its content and there’s no way to alter this behavior. You can work around this with uploading the transparent image itself, make it semi transparent by editing the image in image editor like Photoshop and then use it as background image.

Hope this helps!

#9

OK Thanks - yes thats where I got to also.

#10

Glad to hear we managed to help.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.