title: How can I make my website's background transparent without making the content (images & text) transparent too?
body: <p>I'm doing a website for a school project, and I'm currently having a small problem... I can't make the body's background transparent without it also affecting the content in it.</p>
  
  <p>Here's my HTML code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
      &lt;meta http-equiv="Content-Style-Type" content="text/css" /&gt;
      &lt;title&gt;text&lt;/title&gt;
      &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="head"&gt;
  &lt;/div&gt;
  &lt;div id="wrapper"&gt;
      &lt;ul id="nav"&gt;
          &lt;li&gt;&lt;a href="index.htm"&gt;Inicio&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="sobre.htm"&gt;Sobre a banda&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="membros.htm"&gt;Membros&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="bilhetes.htm"&gt;Bilhetes&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="galeria.htm"&gt;Galeria&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="areapessoal.php"&gt;Área Pessoal&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;h1&gt;&lt;a href="index.htm"&gt;&lt;img src="images/a7x-avenged-sevenfold-7050435-1024-831.jpg" width="130" height="25" alt="Rock Band" /&gt;&lt;/a&gt;&lt;/h1&gt;
      &lt;div id="body"&gt;
          &lt;div id="bodyi"&gt;
              &lt;div id="bodyj"&gt;
                  &lt;div id="sidebar"&gt;
                      &lt;div class="content"&gt;
                          &lt;h2&gt;Galeria de imagens&lt;/h2&gt;
                          &lt;p&gt;Aqui poderá encontrar uma galeria de imagens da banda, com fotos de concertos,
                          &lt;img src="images/denmark.jpg" width="91" height="72" alt="" /&gt;
                          entre outras imagens.&lt;/p&gt;
                          &lt;p class="readmore"&gt;&lt;a href="galeria.htm"&gt;Ver&lt;/a&gt;&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="content"&gt;
                          &lt;h2&gt;Noticias&lt;/h2&gt;
                          &lt;h3&gt;18 de Abril, 2011&lt;/h3&gt;
                          &lt;h4&gt;"So Far Away" vai ter videoclip&lt;/h4&gt;
                          &lt;p&gt;Muitos se questionavam se o mais recente single dos Avenged Sevenfold, "So Far Away", ia ter direito a um videoclip. Eis que surge a boa notícia para os fãs dos A7X: So Far Away vai ter videoclip.
                          &lt;img src="images/63781127.jpg" width="95" height="73" alt="pic 3" /&gt;
                          Já foram divulgadas algumas fotos do set de filmagens.&lt;/p&gt;
                          &lt;h3&gt;10 de Março, 2011&lt;/h3&gt;
                          &lt;h4&gt;A7X nomeados para a Metal Hammer Golden Gods Awards 2011&lt;/h4&gt;
                          &lt;p&gt;Os Avenged Sevenfold foram nomeados para a Metal Hammer Golden Gods Awards 2011 em duas categorias.
                          As categorias onde os A7X estão a participar são as seguintes:&lt;p&gt;
                          - Best International Band (Melhor Banda Internacional)&lt;p&gt;
                          - Best Shredder (com o Synyster Gates) (Melhor Shredder)&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="content"&gt;
                      &lt;center&gt;&lt;img src="images/avengeds.jpg" width="346" height="234" alt="four men walking" /&gt;&lt;/center&gt;
                      &lt;div class="content"&gt;
                          &lt;h2&gt;O album mais recente&lt;/h2&gt;
                          &lt;img src="images/nightmare.jpg" width="82" height="80" alt="Unwired album cover" class="left" /&gt;
                          &lt;p&gt;Os californianos Avenged Sevenfold estão de volta aos discos com "Nightmare". Solos de guitarra, vocalizações rasgadas e um som contagiante continuam a ser a base do sucesso de uma das bandas de heavy-metal com mais fãs no mundo inteiro. 
                          Fundados em 1999 por M. Shadows, Synyster Gates, Zacky Vengeance, Johnny Christ e The Rev - baterista que faleceu em Dezembro de 2009 passado e que foi substituido neste disco por Mike Portnoy, dos Dream Theater - os Avenged Sevenfold já contam com cinco discos de originais na sua carreira.&lt;/p&gt;
                          &lt;div class="divider"&gt;&lt;/div&gt;
                          &lt;h2&gt;Musicas com maior sucesso&lt;/h2&gt;
                          &lt;table summary="track downloads" border="0" cellspacing="0"&gt;
                          &lt;tr&gt;
                              &lt;th width="55%"&gt;Faixa&lt;/th&gt;
                              &lt;th&gt;Album&lt;/th&gt;
                              &lt;th class="hidden"&gt;Dowload links&lt;/th&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Bat Country&lt;/td&gt;
                              &lt;td&gt;City of Evil&lt;/td&gt;
                              &lt;td class="download"&gt;&lt;a href="http://www.youtube.com/watch?v=IHS3qJdxefY"&gt;Ouvir&lt;/a&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Beast and the Harlot&lt;/td&gt;
                              &lt;td&gt;City of Evil&lt;/td&gt;
                              &lt;td class="download"&gt;&lt;a href="http://www.youtube.com/watch?v=7bDg7n-chhU"&gt;Ouvir&lt;/a&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Seize the Day&lt;/td&gt;
                              &lt;td&gt;City of Evil&lt;/td&gt;
                              &lt;td class="download"&gt;&lt;a href="http://www.youtube.com/watch?v=jUkoL9RE72o"&gt;Ouvir&lt;/a&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Almost Easy&lt;/td&gt;
                              &lt;td&gt;Avenged Sevenfold&lt;/td&gt;
                              &lt;td class="download"&gt;&lt;a href="http://www.youtube.com/watch?v=Fi_GN1pHCVc"&gt;Ouvir&lt;/a&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Afterlife&lt;/td&gt;
                              &lt;td&gt;Avenged Sevenfold&lt;/td&gt;
                              &lt;td class="download"&gt;&lt;a href="http://www.youtube.com/watch?v=HIRNdveLnJI"&gt;Ouvir&lt;/a&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Nightmare&lt;/td&gt;
                              &lt;td&gt;Nightmare&lt;/td&gt;
                              &lt;td class="download"&gt;&lt;a href="http://www.youtube.com/watch?v=94bGzWyHbu0"&gt;Ouvir&lt;/a&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Welcome to the Family&lt;/td&gt;
                              &lt;td&gt;Nightmare&lt;/td&gt;
                              &lt;td class="download"&gt;&lt;a href="http://www.youtube.com/watch?v=1OZs7IoWTvc"&gt;Ouvir&lt;/a&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div align="right"&gt;
          &lt;font size="2"&gt;text&lt;/font&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here's the CSS code:</p>
  
  <pre><code>.head{
      width: 150px;
      height: 160px;
  }
  body {
      font-family: tahoma, helvetica, arial, sans-serif;
      font-size: 12px;
      text-align: center;
      background: #000;
      color: #ddd4d4;
      padding-top: 12px;
      line-height: 2;
      background-image: url('images/background.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: 100%;
      opacity: 0.8;
      filter:alpha(opacity=80);
  }
  td, th {
      font-size: 12px;
      text-align: left;
      line-height: 2;
  }
  #wrapper {
      margin: auto;
      text-align: left;
      width: 832px;
      position: relative;
      padding-top: 27px;
  }
  #body {
       background: url(images/body_bg_1.gif) repeat-y;
       width: 832px;
  }
  #bodyi {
       background: url(images/body_top_1.gif) no-repeat;
       width: 832px;
  }
  #bodyj {
       background: url(images/body_bot_1.gif) bottom no-repeat;
       padding: 1px 0;
       }
  #body2 {
       background: url(images/body_bg_2.gif) repeat-y;
       width: 832px;
  }
  #bodyi2 {
       background: url(images/body_top_2.gif) no-repeat;
       width: 832px;
  }
  #bodyj2 {
       background: url(images/body_bot_2.gif) bottom no-repeat;
       padding: 1px 0;
  }
  h1, h2, h3, #nav, #nav li {
      margin: 0; padding: 0;
  }
  #nav {
      font-size: 10px;
      position: absolute;
      right: 0;
      top: 12px;
      line-height: 1.2;
      padding-left: 120px;
  }
  #nav li {
      float: left;
      width: 108px;
      list-style: none;
      margin-left: 2px;
      border-bottom: 1px solid black;
  }
  #nav a {
      background: #738d09;
      color: #2e3901;
      font-weight: bold;
      text-decoration: none;
      display: block;
      text-align: center;
      padding: 1px 0;
  }
  #sidebar {
      float: left;
      width: 250px;
      padding-left: 4px;
  }
  #sidebar .content {
      padding-left: 24px;
  }
  #sidebar .content img {
      float: left;
      clear: left;
      margin: 5px 5px 5px 0;
  }
  #sidebar .divider {
      background: url(images/left_splitter.gif) center no-repeat;
      height: 5px;
      width: 169px;
  }
  #content {
      float: right;
      width: 462px;
  }
  #content1 {
      float: left;
      width: 800px;
  }
  #content1 .content {
      margin: 7px 35px 7px 20px;
      padding-left: 20px;
  }
  #content .content {
      margin: 7px 55px 7px 17px;
  }
  #content .content table {
      width: 310px;
      margin-right: 0px;
  }
  #content .content table td,
  #content .content table th {
      padding-right: 10px;
  }
  #content .content table td.download {
      text-align: right;
      padding-right: 0px;
  }
  #content .divider {
      background: url(images/right_splitter.gif) repeat-x;
      height: 5px;
  }
  h1 {
      position: absolute;
      left: 0;
      top: 0;
  }
  h2 {
      font-size: 10px;
      color: #cf9118;
      margin: 1em 0;
  }
  h3 {
      font-size: 10px;
      margin: 1em 0;
  }
  h5 {
      font-size: 20px;
      color: #cf9118;
      margin: 1em 0;
      text-align: center;
  }
  h6 {
      font-size: 18px;
      margin: 1em 0;
  }
  p {
      margin: 1em 0;
  }
  img {
      border: 0;
  }
  img.left  { float: left; margin-right: 14px; }
  img.right { float: right; margin-left: 14px; }
  .readmore {
      text-align: right;
  }
  .hidden {
      visibility: hidden;
  }
  .clear {
      clear: both;
  }
  a {
      color: #f0b33c;
      font-weight: bold;
      text-decoration: none;
  }
  a:visited {
      color: #cf9118;
  }
  a:hover {
      text-decoration: underline;
  }
  table a {
      text-decoration: underline;
      font-weight: normal;
      color: #7f7c79;
  }
  #power {color:#fff;text-align:center;}
  #power a {color:#fff;}
  </code></pre>
  
  <p>Any help's appreciated... Thanks in advance.</p>