CritiKiL

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

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.

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’…

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?

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

Ok Thanks ??

Dear David Borrink & sacrepath, You both have really helped me out! I tried altering the codes so that I could use a 10px by 10px w/50%opacity white image, but I never saw it working. I’m sure it’s just my nerves from being soo close to completion ~ lol!

But I don’t want any solid areas around the text like David has but rather just have the text & image NOT being opacitized as well. Here is my site:

https://airiana.net/main, and on this page (https://airiana.net/main/hello-world/) you can see that some of the text is affected. The text at the bottom is not affected thanks to the #content code you created above. Can you help me get the correct code that impliments the use of the white image file with my own specified opacity? Thanks in advance ??