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


(Tdot) #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


(scott williams) #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.


(Tdot) #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.


(scott williams) #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.


(Tdot) #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!


(scott williams) #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


(Tdot) #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!