CMS Made Simple Forums

I have a background image that is called from the body-div.

body {
   background: url(uploads/images/site/background.jpg) no-repeat center;
   background-attachment: fixed;
   background-color: #000000;
   color: #FFFFFF;
   margin:1em;    /* gives some air for the pagewrapper */
}

I want the main-div, to be transparant, to make the text more visible:

div#main {
   margin-left: 22%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 2%; /* and some air on the right */
   padding: 5px 0 0 0;

   background-color: #FFFFFF;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  /* for Mozilla */
  -moz-opacity:0.6;
}

The part in red I added to have a transparant area, as is shown in http://www.w3schools.com/css/css_image_transparency.asp Example 3.

This doesnt work though and if I put the code inside the body-div, only the text gets transparent not the image which is supposed to be.

Any ideas?

Ronny

I not absolutely sure but if you leave all the divs around your text without background:color or background-color:color then divs  should be transparent. There is also background-color:transparent that might be required for CSS to validate. But remember that any element between your text and body-div should not have background-color if body-div has the background-image.

K

Just not using background: #*** or background-color: #*** will render the div transparent, make sure surrounding divs have no color...

For now I worked with a lighter version of the background, not only the container, but I get the logic.

Thanks.

Ronny

This is used for fade not transparency...

  background-color: #FFFFFF;
  /* for IE */
  filter:alpha(opacity=60);  opaque being solid this line says only 60% solid = faded
  /* CSS3 standard */
  opacity:0.6;
  /* for Mozilla */
  -moz-opacity:0.6; this is 60% for mozilla products

This will render anything in the div at 60% solid/faded images and text...