Date: 04/24/06 (WebDesign)    Keywords: css, html

Hello,

I need some help with a site I am designing. The basic layout has been defined as a table and I'm trying to use CSS for the main content. I have a background image for the content area and a scroll box where the actual text will be placed defined as ".content" (the text) placed on top of a colored element ".contentBox". The reason why I have these separated as such is because I would like to use the opacity/alpha option so that the background image shows through the content box, but doesn't effect the text. You can get the idea
here (note - the opactity effect is not recognized by IE). The first problem, as you can see, is the bg image begins to tile. This first example has the bg image inserted with HTML (tr background="images/body.gif" height="536"). I cannot find a method for preventing the tiling with HTML, so I instead use CSS (url(images/body.gif) no-repeat), but the image will not show at all. Here is my attempt with CSS background image. Can anyone see where I'm going wrong here?

Style code below the

body {
background-color: #BAB9B9;
}
body,td,th {
color: #333333;
font-size: 12px;
}

.content {
width: 510px; height: 400px;
position:relative; left: 280px; top: -390px;
font-color:#000000;
overflow: auto;
z-index:100
}

.contentBox {
background:#a2b5b0;
opacity:.35;filter: alpha(opacity=35); -moz-opacity: 0.35;
width: 510px; height: 400px;
position:relative; left: 280px; top: 10px;
z-index:50;
}

#bg {
background-image: url(images/body.gif) no-repeat;
z-index:5;
}


Many thanks in advance!!!
(x-posted lightly)

Source: http://community.livejournal.com/webdesign/1099500.html