translucent background color

**gib65** · 10-08-2009, 05:18 PM

Hello,

Is there any way to get a background color to a table cell that's translucid (i.e. half transparent/faded)? I have a general background to the body of the page and it remains fixed while the page itself scrolls (so I can't just created a darkened JPG for the table cell background). Any suggestions?

**traq** · 10-08-2009, 07:17 PM

yes, but you need to do it in several different ways to make it cross-browser:

Code:

/*this makes elements with the class transparent_class 50% opaque*/
.transparent_class {
	filter:alpha(opacity=50); /*IE*/
	-moz-opacity:0.5; /*old netscape*/
	-khtml-opacity: 0.5; /*old safari*/
	opacity: 0.5; /*current web standard*/
}

taken from css-tricks

**gib65** · 10-08-2009, 07:55 PM

Thanks traq, but this also makes the contents of the cell transparent, not just the background. Is there any way to incorporate it into the background only?

**traq** · 10-08-2009, 08:24 PM

no perfect solution. see this blog at css-tricks.

**jscheuer1** · 10-09-2009, 12:30 PM

Nowadays I would just use a semi-transparent .png image as a background image. This will leave out IE 6, but there are ways to make it render like other browsers if you so choose. However, those still using IE 6 are now thankfully a small minority and a properly constructed semi-transparent .png image used as background will still allow the content over it to be legible, just (probably) not be too pretty in IE 6.

Also, rather than go through png fix or other strategies to get IE 6 to render your background png properly, one can easily target that browser for an alternate background, like a solid color.

**Elkidogz** · 10-21-2009, 11:22 PM

Nowadays I would just use a semi-transparent .png image as a background image. This will leave out IE 6, but there are ways to make it render like other browsers if you so choose. However, those still using IE 6 are now thankfully a small minority and a properly constructed semi-transparent .png image used as background will still allow the content over it to be legible, just (probably) not be too pretty in IE 6.

Also, rather than go through png fix or other strategies to get IE 6 to render your background png properly, one can easily target that browser for an alternate background, like a solid color.

This will work with IE 6, 7, 8 (wutevermscomesoutwiththatwillbefudgedup)

http://www.twinhelix.com/css/iepngfix/

know this, use this, love this.

**jscheuer1** · 10-22-2009, 04:23 AM

Originally Posted by Elkidogz

This will work with IE 6, 7, 8 (wutevermscomesoutwiththatwillbefudgedup)

http://www.twinhelix.com/css/iepngfix/

know this, use this, love this.

There is no reason to use such a strategy with IE 7 and above. These browsers already correctly render alpha channel .png images. However, for IE 5.5 through IE 6 it is a very good strategy, though not perfect. So a word to the wise, use conditional comments to ensure that iepngfix from twinhelix or any any other png fix strategy is only applied to IE 6 and less, otherwise you may inadvertently cause problems in later IE browsers which already have native support for alpha channel .png images.

**coothead** · 10-22-2009, 10:18 AM

Hi there gib65,

here is an example for you to try...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
body{
    background-color:#000;
 }
#box{
    width:770px;
    height:535px;
    margin:30px auto;
    border:5px double #f60;
    background-image:url(http://www.coothead.co.uk/images/buddha.jpg);
    background-repeat:no-repeat;
 }
#mytable {
    border:2px inset #333;
    margin:161px auto;
 }
#mytable td {
    width:324px;
    height:200px;
    border:1px solid #000;
 }
#container{
    position:relative;
    height:200px;
 }
#background {
    position:absolute;
    width:324px;
    height:170px;
    padding-top:30px;
    background-color:#f93;
    opacity:0.4;
    filter:alpha(opacity=50);
    font-size:20px;
    font-weight:bold;
    text-align:center;
 }
#foreground {
    position:absolute;
    width:324px;
    height:200px;
    line-height:200px;
    font-size:20px;
    font-weight:bold;
    text-align:center;
 }
</style>

</head>
<body>

<div id="box">

<table id="mytable"><tr>

<td>
<div id="container">
 <div id="background">This is the Background</div>
 <div id="foreground">This is the Foreground</div>
</div>
</td>

</tr></table>

</div>

</body>
</html>

coothead

p.s. I would recommend that you reconsider your use of tables for layout purposes.

Thread: translucent background color

Thread Tools

Search Thread

translucent background color

Bookmarks

Bookmarks

Posting Permissions