How to set background colour to 0% opacity (CSS)

Classic
1

I’m wondering if there’s a basic CSS to set the background of a theme (the part under the text boxes) to completely transparent?

I’m trying to remake the following site in a new theme:
http://www.seesuite.ca/

As you can see, the area under the text is transparent, which reveals the full-page image underneath.
This is what I want.

The current theme I’m using ( http://michaeldaviddesign.com/themes/affinity/page11/index.html )
allows you to change the colour under the text but not the opacity of that colour.
So now I have the full page image blocked out by the colour background under the text.

Is there CSS that will allow me to reduce the opacity of that?

Thanks a lot

2

I’m not sure exactly which element you want to target but in general:

target the element{
background-color: rgba(20,150,10,.5);
}

The .5 is 50% opacity
Does that help?
if you can be more specific on what you want to target maybe you can get a more specific solution.
the page you linked to had no background image with text on top.

3

Thanks for your help -

Here’s a picture of my work in progress. I changed the background colour to green just to illustrate which part I need reduced to 0% opacity.

backgroundOpacity.jpg1382×984 599 KB

4

A screen shot doesn’t really help.
Have you got a url of the published page? With a published page I can have a look and get the element name.
Do you know how to use the developer tools in your browser? if so you can preview it locally and find the element name.

1 Like
5

Thanks, I’m a relative beginner in this stuff but will play around with it.

I was hoping that the link to the affinity theme might lead to that element under the text.

will keep at it. Thanks!

6

it’s kinda hard to tell it could be:

#textp
or
.stacks_top
or
you may have to target something that looks like #stacks_out_99_page99 (the numbers change)

If you publish your page (even to a test folder) then you can tell for sure

7

The developer suggested the same thing as your first response.

He just got back to me with another idea and it worked -

#wrapper { background: rgba(0, 0, 0, 0.0)!important; }

Thanks a lot for taking the time to help!

1 Like