Div table background

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

drummerguy101

Thread Starter
Joined
Aug 13, 2007
Messages
63
I have created a Div table like this:

Code:
<div style="width: 220px; height: 280px; overflow: auto; border: none; background: black;"> contents here</div>
I want to make the black background semi transparent so that you can still see the main webpage background image but still be able to read the text in the box without having to strain.

what code do i use and where do i put it?
 

tomdkat

Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
The easiest way for you to accomplish this is to make a transparent PNG that you would use as the background image of the DIV. The PNG would have the desired transparency and the page background would show through. Here some sample HTML:
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>Black transparent background</title>
<style type="text/css">
.transparent-background {
  display: block;
  width: 220px;
  height: 280px;
  margin-right: auto;
  margin-left: auto;
  background-image: url(black-transparent-background.png);
  background-repeat: no-repeat;
  color: white;
}

</style>
</head>
<body style="background-image: url(Water%20lilies.jpg);">
<div class="transparent-background">This is some text</div>
</body>
</html>
Attached is a screenshot of the above HTML. :)

Peace...
 

Attachments

Joined
Oct 25, 2007
Messages
551
If you don't want to use images (which I would recommend you don't because of resizing and loading issues) you can use three CSS tags to ensure cross-browser compatibility:
Code:
filter:alpha(opacity=25);
-moz-opacity:.25;
opacity:.25;
Those should work for pretty much all modern browsers.
 

tomdkat

Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
If you don't want to use images (which I would recommend you don't because of resizing and loading issues) you can use three CSS tags to ensure cross-browser compatibility:
The PNG I made in my example is really small, like 6kb or something. Since his DIV has a static size, I made the PNG the same size of the DIV so no resizing is needed.

I've got no issue with using CSS opacity but the problem then becomes applying the opacity ONLY to the background image, which isn't possible unless you do one of two things:
  1. Make the background image a standalone image with the opacity applied (this means using the img tag)
  2. Have two DIVs layered on top of each other, the lower DIV having the opacity applied and the upper DIV having a transparent background. The issue here is positioning the DIVs over each other, which is possible but takes some effort.
Going with an image is the path of least resistance. :)

We've discussed backgrounds with opacity many times here so you can search for those threads to re-hash the issues surrounding using CSS only to control the opacity of a background image.

Peace...
 
Joined
Oct 25, 2007
Messages
551
I would agree that it's easier and mayber more convinient :), but the CSS is more widely supported. But if people are still using ancient browsers that don't support transparent GIFs, they probably won't notice the difference ;)
 

tomdkat

Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
I would agree that it's easier and mayber more convinient :), but the CSS is more widely supported.
Granted, using CSS for this would be preferred but CSS can't readily do what drummerguy101 is looking to do. What usually happens is people assign a background image to a DIV element and want the background to be transparent, so they apply the opacity styles, as you posted above, to the DIV. That works great until they put text or other content in that DIV and quickly discover the text and other content has the opacity applied as well.

Personally, I think CSS should be used as appropriate to design the cleanest, most browser compatible sites possible. I don't think CSS use should be "forced" or completely abandoned. Sure, drummerguy101 could go through the hoops that would be required to use CSS only to apply the opacity but I don't think his case really calls for those hoops. :)

Peace...
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Top