# Div table background



## drummerguy101 (Aug 13, 2007)

I have created a Div table like this:


```
<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 (May 6, 2006)

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:

```
<!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...


----------



## TheRobatron (Oct 25, 2007)

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:

```
filter:alpha(opacity=25);
-moz-opacity:.25;
opacity:.25;
```
Those should work for pretty much all modern browsers.


----------



## tomdkat (May 6, 2006)

TheRobatron said:


> 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: 
Make the background image a standalone image with the opacity applied (this means using the img tag)
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...


----------



## TheRobatron (Oct 25, 2007)

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 (May 6, 2006)

TheRobatron said:


> 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...


----------

