title: Making a transparent box with CSS
body: <p>I am trying to make an transparent box on the background of container, however, I am not able to make it in the middle of the background, instead, when I am trying to use the top-margin to achieve my design, it will move the background image down also, so I would like to ask why I cannot make it like the example given by W3C in <a href="http://www.w3schools.com/Css/tryit.asp?filename=trycss_transparency" rel="nofollow">http://www.w3schools.com/Css/tryit.asp?filename=trycss_transparency</a></p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01   Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;META http-equiv="Content-Type" Content="text/html; Charset=UTF-8"&gt;
      &lt;title&gt;
          Portal
      &lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css" type="text/css"/&gt;
      &lt;script type="text/javascript" src="ajax.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="load()"&gt;
      &lt;div id="header"&gt;
          &lt;img src="images/logo.gif" id="logo" alt="Logo"/&gt;
          &lt;a href="http://www.google.com"&gt;
              &lt;img src="images/a.png" id="logo2" align="right" alt="logo"/&gt;
          &lt;/a&gt;
      &lt;/div&gt; 
      &lt;div id="container"&gt;
          &lt;div id="function"&gt;&lt;/div&gt;
          &lt;div id="Display"&gt;&lt;/div&gt;
          &lt;div id="View"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the CSS file:</p>
  
  <pre><code>body{
  font-size:100%;
  margin: 0em 9em 0em 9em;
  }
  
  #header{
  width:55em;
  height:2.375em;
  background:black;
  border: 0em 0em 0em 0em;
  }
  
  #logo{
  padding: 0em 0em 0em 2em;
  }
  
  #logo2{
  width:3.618em;
  height:2.3em;
  margin: 0.1em 0.25em 0.1em 0em;
  }
  
  #container{
  width:55em;
  height: 36.25em;
  background-image:url("images/background1.jpg");
  margin: 0.25em 0em 0em 0em;
  }
  
  #function{
  width:35em;
  height:32.625em;
  margin: 2em 10em;
  background-color: #ffffff;
  opacity:0.6;
  filter:alpha(opacity=60);
  }
  
  #footer{
  font-family:"Times New Roman";
  width:62em;
  font-size:0.75em;
  color:grey;
  border-top-style:solid;
  border-color:grey;
  border-width:0.25em;
  margin: 0.25em 0em 0em 5em;
  }
  </code></pre>