My site has a mountain (snowboarding season is coming) for a background, so I'm going with blue/white/orange for colours, and I'd like ot put in a table layout for my information. I know how to make a basic table, but what I'd like to know is, how do I give the table background a lighter transparent look? I'd like to have black borders, with a white/transparent background, what would be the code for this? Thanks.<!--content-->a couple of ways, the only 100% cross browser supported is to cut out the section of the image that the table would cover and fade it and then place it as the table background.<br />
<br />
Otherwise you can use ie's proprietary filter:<br />
<br />
<br />
table {background:url(foo.png);filter: alpha(opacity=50); <br />
-moz-opacity: 0.50; <br />
} <br />
<br />
opacity=n <br />
where n is from 0 to 100 <br />
<br />
-moz-opacity: n <br />
where n is from 0.00 to 1.00 <br />
<br />
welcome to the forums by the way
<br />
<br />
/added<br />
be prepared for the filter to cause you problems<!--content-->Thanks, where do I put that though?<!--content-->you can put it inbetween the head tags like this:<br />
<br />
<style type="text/css"><br />
table.main {background:url(foo.png);filter: alpha(opacity=50); <br />
-moz-opacity: 0.50; }<br />
</style> <br />
<br />
<br />
and in your html:<br />
<br />
<br />
<table cellpading etc... class="main"><br />
<tr><td.....etc<br />
<br />
<br />
<!--content-->I can't get it to work, I'm probably way off, because now my border is fading, but the background color won't show up at all. This is what I have:<br />
<br />
<br />
<style type="text/css"><br />
table.main {background:"http://www.starspage.com/desktop_wallpapers/nature/mountain/02/mountain_wallpapers02.jpg";filter: alpha(opacity=50); <br />
-moz-opacity: 0.50; }<br />
</style><br />
<table bgcolor="white" border=2 bordercolor=black cellpadding=2 cellspacing=0 class="main"><font color=white><font face=verdana><font size=1><tr><td>text</td></tr></table><!--content-->uhh correct me if I am wrong, but doesn't a table have a see through background if you don't give it one?<br />
<br />
or is the image in the table?<!--content-->Scoutt, yes it's see through, but I want it to be white/transparent, not fully transparent.<!--content-->oh, that expalins it. you want a backgorund in yoru table but a see though white. gotcha.<br />
<br />
well you won't get a cross-browser support. and IE has issues with filter.<br />
<br />
but give it a shot. also all css goes in between the head tags, not in the body.<!--content-->Originally posted by scoutt <br />
oh, that expalins it. you want a backgorund in yoru table but a see though white. gotcha.<br />
<br />
well you won't get a cross-browser support. and IE has issues with filter.<br />
<br />
but give it a shot. also all css goes in between the head tags, not in the body. <br />
<br />
what about the style attribute?<!--content-->what about it?<br />
<br />
I just said teh style tag doesn't go in the body. you can use style in the body as part of teh table tag, or any tag, but you shouldn't use the style tag in teh body.<!--content-->
<br />
Otherwise you can use ie's proprietary filter:<br />
<br />
<br />
table {background:url(foo.png);filter: alpha(opacity=50); <br />
-moz-opacity: 0.50; <br />
} <br />
<br />
opacity=n <br />
where n is from 0 to 100 <br />
<br />
-moz-opacity: n <br />
where n is from 0.00 to 1.00 <br />
<br />
welcome to the forums by the way
<br /><br />
/added<br />
be prepared for the filter to cause you problems<!--content-->Thanks, where do I put that though?<!--content-->you can put it inbetween the head tags like this:<br />
<br />
<style type="text/css"><br />
table.main {background:url(foo.png);filter: alpha(opacity=50); <br />
-moz-opacity: 0.50; }<br />
</style> <br />
<br />
<br />
and in your html:<br />
<br />
<br />
<table cellpading etc... class="main"><br />
<tr><td.....etc<br />
<br />
<br />
<!--content-->I can't get it to work, I'm probably way off, because now my border is fading, but the background color won't show up at all. This is what I have:<br /><br />
<br />
<style type="text/css"><br />
table.main {background:"http://www.starspage.com/desktop_wallpapers/nature/mountain/02/mountain_wallpapers02.jpg";filter: alpha(opacity=50); <br />
-moz-opacity: 0.50; }<br />
</style><br />
<table bgcolor="white" border=2 bordercolor=black cellpadding=2 cellspacing=0 class="main"><font color=white><font face=verdana><font size=1><tr><td>text</td></tr></table><!--content-->uhh correct me if I am wrong, but doesn't a table have a see through background if you don't give it one?<br />
<br />
or is the image in the table?<!--content-->Scoutt, yes it's see through, but I want it to be white/transparent, not fully transparent.<!--content-->oh, that expalins it. you want a backgorund in yoru table but a see though white. gotcha.<br />
<br />
well you won't get a cross-browser support. and IE has issues with filter.<br />
<br />
but give it a shot. also all css goes in between the head tags, not in the body.<!--content-->Originally posted by scoutt <br />
oh, that expalins it. you want a backgorund in yoru table but a see though white. gotcha.<br />
<br />
well you won't get a cross-browser support. and IE has issues with filter.<br />
<br />
but give it a shot. also all css goes in between the head tags, not in the body. <br />
<br />
what about the style attribute?<!--content-->what about it?<br />
<br />
I just said teh style tag doesn't go in the body. you can use style in the body as part of teh table tag, or any tag, but you shouldn't use the style tag in teh body.<!--content-->