Need transparent background but a solid content area:

The problem with using CSS opacity is that all children elements within the HTML element of that style inherit the same opacity.

Try using a .png or .gif image of transparency and assigning that image as a background image to the HTML element, rather than using opacity.

The image need only be 1 pixel by 1 pixel, as it can repeat throughout the HTML element it is applying to.

I have that image and the opacity is at 50% of white (10×10 pixels). But when I inserted it into the above code I did not see it working. Here’s what I had, and I had put this in the #main only:

#main {background-image:url(https://airiana.net/images/foreground50percent.png);
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 18px 18px 18px 18px;
    clear: both;
    margin-top: 20px;
    opacity: 0.8;
    overflow: hidden;
    padding: 40px 20px 0;
    width: 900px;
}

I think ‘maybe’ the code is not correct, or was I supposed to remove the opacity: 0.8;?

Try replacing the opacity: 0.8; style with the background image, so you want something like;

#main {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 18px 18px 18px 18px;
    clear: both;
    margin-top: 20px;
    background-image: url(https://airiana.net/images/foreground50percent.png);
    overflow: hidden;
    padding: 40px 20px 0;
    width: 900px;
}

But it looks like the url path is wrong for your image. If your images folder is within your themes directory, try using this;

url(/wp-content/themes/main/images/foreground50percent.png);

No, the path is correct (long story ~ lol). So I did THIS and it works:

#main {
background: none repeat scroll 0 0 ;
border-radius: 18px 18px 18px 18px;
clear: both;
margin-top: 20px;
background-image: url(https://airiana.net/images/foreground50percent.png);
overflow: hidden;
padding: 40px 20px 0;
width: 900px;
}

#content, #content input, #content, #content input, #content textarea {
    background: none repeat scroll 0 0 ;
    color: #000000;
    font-size: 14px;
    line-height: 24px;
    opacity: 1;
}

Now the ONLY other problem is that #content doesn’t include areas of the site like the LINKS nav page and the widget area where the ‘archives’ and ‘recent comments’ are (right sidebar):

https://airiana.net/main/links

How can I get those to not have opacity?

You could apply a background color of white the HTML elements you don’t want opacities on.
For example;

#content,
.sidebar {
 background-color: #fff;
}

No that doesn’t look well at all. I think if I could identify those areas, i could specify in the Original #content code to omit it from the opacity…

It’s obviously NOT ‘content text area or content input’…

How can I get those to not have opacity?

Then I’m not sure what you mean for an area not to have an opacity.
It can either be 100% or 0%, and in this case, white or completely transparent.

If you want to still use the opacity CSS, here’s a tutorial to get around the children inheritance of opacity
https://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Are you angry? I thank you for helping me out and you’ve gotten me to get the opaic image to work by putting it in the right spot and for that I’m greatful. ??

I have read much of the info regarding this but I guess ‘now’ I’m looking for a proper way to apply it, that’s all. This code allows for all text and inputted text to be ‘witout’ opacity:

#content, #content input, #content, #content input, #content textarea, {
    background: none repeat scroll 0 0 ;
    color: #000000;
    font-size: 14px;
    line-height: 24px;
    opacity: 1;
}

I know this because without it the text at the bottom of the image on this page (https://airiana.net/main/hello-world/ – all large text at bottom of image), would be just like the text at the ‘recent comments’ and ‘archives’ (sidebar area). My only gripe NOW would be to find the location of those text assignments and then include them into the above code. I didn’t mean to make you angry man, it’s just that we are soo close and none of these tutorials will tell me “which area in the style.css” is the area that I can rewrite so that it doesn’t look opaic.

So, it was brought to my attention that those area’s are hyperlinks and as long as they are visible when people ‘hover over’ them, they’re alright! So thanks to all who helped out but now it’s time to start populating this website and turn it over to the client! ??

Hello CritiKil,

I’ve been working on this same issue that you had and was wondering if you could guide me? I’m trying to add pictures to my content area, but I don’t want them to have opacity…Is this what you figured out? Thanks in advance

Redlodgeales, create your own thread on the issue.