HTMLHelp Forums > Is there a way to make my CSS text area transparent to see the background?

Full Version: Is there a way to make my CSS text area transparent to see the background?

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

SeanWoods

Apr 30 2009, 01:31 PM

I made my text areas with CSS and was wondering if I could make the background color semi-transparent to see through to the final background?

I am hoping to avoid using photoshop and creating a big jpeg/gif image.

Here is my site: My Webpage

Any ideas? I don't want it totally transparent, but wanted to see how it looks semi-transparent. I think what I am looking for is opacity.

CODE

#wrapper {
    width: 800px;
    text-align: left;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: none;
    background-color: #FFFFFF;
    border-right-width: 1px;
    border-right-color: #999999;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
}
#navigation {
    height: 20px;
    text-align: center;
    margin-bottom: 15px;
}
#wrapper #bodyArea #left {
    width: 120px;
    float: left;
    background-color: #CCCCCC;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #999999;
    display: block;
    border-right-width: 1px;
    border-right-style: none;
    border-right-color: #999999;
    padding-top: 0px;
    padding-right: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    border-left-style: none;
}
#wrapper #bodyArea {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #999999;
    background-position: center;
    width: 799px;
    clear: both;
}

#wrapper #bodyArea #right {
    width: 679px;
    float: right;
    padding: 0px;
    border-top-width: 1px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #999999;
    text-align: justify;
    border-left-width: 1px;
    border-left-color: #999999;
    clear: right;
    margin-top: 0px;
}

#wrapper #bodyArea #footer {
    height: 55px;
    clear: both;
    background-color: #CCCCCC;
    border-right-style: none;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #999999;
    text-align: center;
    background-position: center;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #999999;
    border-left-style: none;
}

pandy

Apr 30 2009, 01:49 PM

Theoretically yes, but form controls are special. I don't know of a browser that allows either opacity or a transparent background here. There still could be one, only I haven't seen it.

There would be problems anyway. Opacity affects both the foreground and the background. If the textarea was semi-transparent, wouldn't you rather see the white background behind it than the turquoise one?

Couldn't you use a washed out copy of the backgrund for the textarea? Or maybe even a background color?

Anyway, here's a rundown on opacity if you want to learn about it anyway. Don't know how up to date it is.
http://www.quirksmode.org/css/opacity.html

SeanWoods

Apr 30 2009, 01:55 PM

QUOTE(pandy @ Apr 30 2009, 01:49 PM)

Brian mentioned that it was difficult to read the writing on my background (which I want to keep) and thought this may be a way to fix it. Sort of like this site: Transparent Background I see what you mean though.

I don't know if making the font on the background smaller might be better. I will have to play around with it tonight.

pandy

Apr 30 2009, 02:18 PM

Brian can't have meant the background of the textarea. That is bright white AFAICS.

pandy

Apr 30 2009, 02:20 PM

In't the textarea here what we are talking about?
http://grammarperfection.com/submit_document.html

SeanWoods

Apr 30 2009, 02:34 PM

QUOTE(pandy @ Apr 30 2009, 02:20 PM)

In't the textarea here what we are talking about?
http://grammarperfection.com/submit_document.html

Sorry, what I mean is making the white text area a little bit transparent so that the cursive writing on the blue background might show through just a bit.

He thought that the cursive writing on the background, "We catch what spell check misses" was hard to read which could be a little annoying. I know it really isn't crucial to make it totally able to be read, but I just thought it might make it easier to figure out what it actually said. I know what it says, but someone just coming to my site might think, "what the heck is written on the background, I can't make it all out?" You know?

Christian J

Apr 30 2009, 02:36 PM

QUOTE(pandy @ Apr 30 2009, 08:49 PM)

Theoretically yes, but form controls are special. I don't know of a browser that allows either opacity or a transparent background here.

Works on TEXTAREA in all my browsers...

Christian J

Apr 30 2009, 02:48 PM

QUOTE(SeanWoods @ Apr 30 2009, 09:34 PM)

QUOTE(pandy @ Apr 30 2009, 02:20 PM)

In't the textarea here what we are talking about?
http://grammarperfection.com/submit_document.html

Sorry, what I mean is making the white text area a little bit transparent so that the cursive writing on the blue background might show through just a bit.

I don't think you can make the blue BG shine through the white container into the TEXTAREA (except with certain IE filters).

Since the blue body background isn't fixed, you could easily use a paler version for the TEXTAREA.

If the body BG was fixed, you might fake it by giving the TEXTAREA a table row of its own, then use a non-tiling solid white background-image in that row with a transparent cut-out for the TEXTAREA. This will only work in a fixed-width scenario, though. Or you might try http://meyerweb.com/eric/css/edge/complexspiral/demo.html but IE6 (7?) doesn't support it.

pandy

Apr 30 2009, 03:24 PM

QUOTE(Christian J @ Apr 30 2009, 09:36 PM)

Works on TEXTAREA in all my browsers...

You are right! I don't know why I was all convinced it did not work, but I was.

Sorry for the confusion, SeanWoods.

Still, I don't think this would increase readability at all. On the contrary actually.

Christian J

Apr 30 2009, 04:21 PM

Seems opacity even works on SELECT in most browsers, but only when it's closed, and you must lower the opacity value a bit more.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.