Semi-transparent background?

[J741]

I currently have a background image for my page body. If I put text on top of it, it's very hard to read. So, I put a DIV block on the page with a white background on which the text is easy to read. What I want is to make the white background of the DIV block semi-transparent to that the page body's backgound image is partially visible through the DIV block's background color. In my mind, this should diffuse the background image where the text is, and make it easier to read. Now I tried using the 'opacity' property on the DIV block, and it does what I want to the background, but it also washes out the text making it just as illegible as when I started.

Anyone know of a simple was to address this issue?

- James.

My memory is not as good as it should be, and neither is my memory.

I have forgotten more than I can remember

 

[Vragabond]

I would personally use the technique that Eric Meyer uses here:

http://www.meyerweb.com/eric/css/edge/complexspiral/demo2.html

 

[BillyRayPreachersSon]

You have three choices, as I see it:

1. Give up now.
2. Use a PNG with alpha transparency for the background image. This will NOT work in IE/Win, however.
3. Use opacity (and related properties for maximum browser reach), and have the text absolutely positioned on top of that DIV (but not a child of it, so the opacity does not affect it).

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

Yeah, the way opacity works is ridiculous. Another example of W3C not thinking about how people might want to use CSS.

An alternative to Dan's option (2) is to make a 2x2 pixel gif image like this:
[tt]

oX
Xo
​

[/tt]
Where o represents a fully transparent pixel and X represents a solid white one. Depending on your background image, text size, etc. it could look OK. If you make a 50% transparent png too, you can serve that up to modern browsers and only send the gif to IE:

div.main {
   background-image: url(/images/trans.png);
}

* html div.main {
   background-image: url(/images/quasitrans.gif);
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[johnwm]

You may get the result you need by running the background image through Photoshop (or whatever) and reducing saturation and contrast, and bringing up brightness

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[CliveC]

Try this, it should do what you want and get over the IE problem and work fine on Moz. opaque.png is just a 1 pixel white background with 50% opacity.

.bg {
background-image:url(background.jpg); 
background-repeat:no-repeat; 
}
.opaque {
float:left; font-family:verdana; font-weight:bold;
padding:30px; margin:20px; border:solid 1px #000;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, 
 sizingMethod=scale src='opaque.png');
}
.opaque[class] {
background-image:url(opaque.png);
}

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

http://port-lucaya.com

 

[CliveC]

I put an example at:

http://tubularity.com/opacity/

Maybe others might test it on other browsers and post results and modifications.
It might be safer to use IE conditionals [if IE] etc.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

http://port-lucaya.com