HTML AND CSS: semi transparent background but with full opacity text - Page 4

frederiknb · 25-Jun-2007, 10:23 AM **#46**

I had the exact same problem not so long ago. See my solution here (works in Firefox, IE 6+7, Opera and Safari... Sadly not konqueror yet): http://prog.driversites.dk/?p=4

Tact · 27-Jun-2007, 06:39 PM **#47**

wow. that looks great, fred. i saved that link in my favs. definately something i'm gonna mess with when i get the chance. so a simple line can somehow make ie6 support it. omg >.<

the holy grail! lol

thanks for sharing.

yet another great tool to use for the many situations one might find themselves in while trying to achieve a certain effect. woo hoo

tomdkat · 04-Aug-2007, 08:16 PM **#48**

Quote:

Originally Posted by Tact

in the ifram tag <iframe src="blahblah.htm"></iframe> you would put this inside it like so:

<iframe src="blahblah.htm" allowtransparency="true">

and then in the actually html file tha you want IN the iframe, you would put this int he body tag:

<body style="background-color: transparent;">

this is cool and all, it only makes the background transparent but not the text,

I had already figured out the transparent background color but the "allowtransparency" attribute is EXACTLY what I've been searching for! Thanks!

Peace...

Kentx · 13-Sep-2007, 05:50 PM **#49**

I've read every single response people have written, and they all involve DIV and IFRAME solutions. I need a sorta simple answer to the transparency question, HOWEVER, I am using a different design.

I have created a table with multiple rows and multiple cells, and its against a blank page with a normal background using a single image that is fixed with no repeating. I want the table to have a COLOR, preferring a light grey background for the WHOLE table, but having that color transparent by about 35-65%. Everytime I do this the following thing happens:

~ The entire table becomes transparent by that percentage, and normally that would be ok, BUT the text and form data (I am creating a form inside a table as well) is also that transparent.

I do not want to create an Iframe and there is no need for elaborate CSS. I jsut want a table with a colored background thats semi-transparent so it shows the image behind it. So how do we solve this? For reference I am using Frontpage to build it. Just please give me a straightforward answer because I've been looking for this solution forever. Thanks

tomdkat · 02:26 AM

Quote:

Originally Posted by Kentx

I do not want to create an Iframe and there is no need for elaborate CSS. I jsut want a table with a colored background thats semi-transparent so it shows the image behind it. So how do we solve this? For reference I am using Frontpage to build it. Just please give me a straightforward answer because I've been looking for this solution forever. Thanks

Sounds like you're going to need some "elaborate" CSS.

How about this: put the table in a DIV that has the background color you desire. Set the opacity of the color as you desire. Then, put the table inside the DIV and make sure the table has a transparent background.

I'll see if I can work up a quick example (if that will even work).

EDIT: Ok, here is an example of what I *think* you want.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Transparency with tables</title>
  <style type="text/css">
.content {
  display: block;
  width: 800px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  background-color: #666666;
  opacity: 0.746;
}

td {
  height: 100px;
  text-align: center;
}


  </style>
</head>
<body
 style="background-attachment: fixed; background-repeat: no-repeat; background-image: url(../wallpaper/gates_of_hell_800x600.jpg); background-position: center top;">
<div class="content">
<table
 style="width: 75%; text-align: left; margin-left: auto; margin-right: auto;"
 border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td>Column #1</td>
      <td>Column #2</td>
      <td>Column #3</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
</div>
</body>
</html>

Be sure to replace the background image with whatever image you choose. Adjust the opacity setting to control the transparency of the solid color background.

Peace...

Kentx · 14-Sep-2007, 12:34 PM **#51**

This doesnt work. The table doesnt turn transparent at all and the div has no coding for a background color that changes transparency. When I adjust this, there is an overlay of a giant grey square behind the text in the table that appears to be the same size of the background image. Are you sure the code you inserted last is the correct way of representing this div?

Kentx · 14-Sep-2007, 12:58 PM **#52**

The background shows through the table but the table entirely is transparent by a certain percentage. The main problem is everything INSIDE each cell needs to be 100% visable.

Kentx · 14-Sep-2007, 01:07 PM **#53**

This is the website for reference. Ignore the crappy form creation for the time-being, but the tables its located in NEEDS to be visable, but I want the table background to be light grey thats semi-transparent so you can see the background of the page.

http://movienewsletters.net/Projects/index.htm

tomdkat · 14-Sep-2007, 02:37 PM **#54**

Quote:

Originally Posted by Kentx

This doesnt work. The table doesnt turn transparent at all and the div has no coding for a background color that changes transparency. When I adjust this, there is an overlay of a giant grey square behind the text in the table that appears to be the same size of the background image. Are you sure the code you inserted last is the correct way of representing this div?

Are you using IE to view the HTML I posted above, by chance?

I didn't test the HTML above in IE but it works perfectly in Firefox, Opera, and Safari (all 3 on Windows).

So, what you see is an IE "thing". Attached are some screenshots to demonstrate what the HTML above does.

I'll work up something for IE, if I can.

Peace...

tomdkat · 14-Sep-2007, 02:56 PM **#55**

Quote:

Originally Posted by Kentx

This is the website for reference. Ignore the crappy form creation for the time-being, but the tables its located in NEEDS to be visable, but I want the table background to be light grey thats semi-transparent so you can see the background of the page.

http://movienewsletters.net/Projects/index.htm

Ok, take a peek at the attached screenshots and let me know if this is what you're after.

Peace...

Kentx · 14-Sep-2007, 03:24 PM **#56**

The second thumbnail its PERFECT! How did you do that?? I also noticed that your using firefox. I am using IE7. Is that a problem??

tomdkat · 14-Sep-2007, 03:47 PM **#57**

Quote:

Originally Posted by Kentx

The second thumbnail its PERFECT! How did you do that?? I also noticed that your using firefox. I am using IE7. Is that a problem??

Did you like "firefox-table2" or "firefox-table2b" or both? One (firefox-table2b) has less opacity applied to the image. Opera, Safari, and just about any other "modern" non-IE browser should render that image w/ opacity the same as Firefox does. I'll see if I can try it in IE 7 to see how my page looks.

How did I do it? I used "elaborate" CSS.

Seriously, my solution isn't perfect and needs work but what I basically did was this:

Put the table inside a DIV.
Put a 10x10 jpg image of the color "lightgrey" (HTML Hex code #cccccc) in the DIV.
Set the "lightgrey" image to have a height and width of "100%". (Since it's a tileable image, it will scale nicely.)
I gave the table (the "table1" element, actually) a z-index of 5 and a top margin of "-100%". The z-index is needed to make the table appear "over" the "lightgrey" image and the top margin of "-100%" is needed to move the table to the top of the DIV it's contained in.

That's not 100% perfect but it's what you see in the screenshots I posted.

Peace...

Kentx · 14-Sep-2007, 03:52 PM **#58**

I liked the firefox table 2b one better, and would you mind putting the code up here? I am trying to tweak it for IE but its kinda difficult without reference

tomdkat · 09:05 PM

Ok, this isn't perfect but it should get you in the right direction:

Here is the CSS styling:

Code:

  <style type="text/css">
.style1 {
  font-size: 36px;
  font-style: italic;
  font-weight: bold;
}

#table1 {
  z-index: 5;
  position: relative;
  margin-top: -2128px;
}

#lightgrey {
  display: block;
  width: 100%;
  height: 2128px;
}

#background {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.60;

  /* To get opacity working in IE:  http://www.quirksmode.org/css/opacity.html */
  filter: alpha(opacity=60);
}

#lightgrey textarea, input {
  background-color: transparent;
}
  </style>

The "style1" class was already in your HTML file. The other ids I added.

Here are the HTML changes I made:

Code:

  
<div id="lightgrey">
 <img src="lightgrey.jpg" id="background" />
  <table id="table1" border="1" cellpadding="0"  cellspacing="0" width="100%">

Code:

  </table>
  </div>

Adjust the opacity of the #background id to adjust the table background image.

That's it!

EDIT: I found how to get the opacity working in IE and updated the CSS above.

Peace...

Kentx · 17-Sep-2007, 11:30 AM **#60**

Thanks! That worked better than I expected!

Tag Cloud
access acer asus bios bsod computer crash dns drive driver drivers error ethernet excel freeze games gaming graphics hard drive hardware hdmi internet java laptop malware memory monitor motherboard network printer problem ram random registry router slow software sound trojan usb video virus vista wifi windows windows 7 windows 7 32 bit windows 7 64 bit windows xp wireless

Currently Active Users Viewing This Thread: 7 (0 members and 7 guests)

Search
Search for:

Find the solution to yourcomputer problem!

Find the solution to your
computer problem!