How can I make my website's background transparent without making the content (images & text) transparent too?
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.
Here's my HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>text</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head">
</div>
<div id="wrapper">
<ul id="nav">
<li><a href="index.htm">Inicio</a></li>
<li><a href="sobre.htm">Sobre a banda</a></li>
<li><a href="membros.htm">Membros</a></li>
<li><a href="bilhetes.htm">Bilhetes</a></li>
<li><a href="galeria.htm">Galeria</a></li>
<li><a href="areapessoal.php">Área Pessoal</a></li>
</ul>
<h1><a href="index.htm"><img src="images/a7x-avenged-sevenfold-7050435-1024-831.jpg" width="130" height="25" alt="Rock Band" /></a></h1>
<div id="body">
<div id="bodyi">
<div id="bodyj">
<div id="sidebar">
<div class="content">
<h2>Galeria de imagens</h2>
<p>Aqui poderá encontrar uma galeria de imagens da banda, com fotos de concertos,
<img src="images/denmark.jpg" width="91" height="72" alt="" />
entre outras imagens.</p>
<p class="readmore"><a href="galeria.htm">Ver</a></p>
</div>
<div class="content">
<h2>Noticias</h2>
<h3>18 de Abril, 2011</h3>
<h4>"So Far Away" vai ter videoclip</h4>
<p>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.
<img src="images/63781127.jpg" width="95" height="73" alt="pic 3" />
Já foram divulgadas algumas fotos do set de filmagens.</p>
<h3>10 de Março, 2011</h3>
<h4>A7X nomeados para a Metal Hammer Golden Gods Awards 2011</h4>
<p>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:<p>
- Best International Band (Melhor Banda Internacional)<p>
- Best Shredder (com o Synyster Gates) (Melhor Shredder)</p>
</div>
</div>
<div id="content">
<center><img src="images/avengeds.jpg" width="346" height="234" alt="four men walking" /></center>
<div class="content">
<h2>O album mais recente</h2>
<img src="images/nightmare.jpg" width="82" height="80" alt="Unwired album cover" class="left" />
<p>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.</p>
<div class="divider"></div>
<h2>Musicas com maior sucesso</h2>
<table summary="track downloads" border="0" cellspacing="0">
<tr>
<th width="55%">Faixa</th>
<th>Album</th>
<th class="hidden">Dowload links</th>
</tr>
<tr>
<td>Bat Country</td>
<td>City of Evil</td>
<td class="download"><a href="http://www.youtube.com/watch?v=IHS3qJdxefY">Ouvir</a></td>
</tr>
<tr>
<td>Beast and the Harlot</td>
<td>City of Evil</td>
<td class="download"><a href="http://www.youtube.com/watch?v=7bDg7n-chhU">Ouvir</a></td>
</tr>
<tr>
<td>Seize the Day</td>
<td>City of Evil</td>
<td class="download"><a href="http://www.youtube.com/watch?v=jUkoL9RE72o">Ouvir</a></td>
</tr>
<tr>
<td>Almost Easy</td>
<td>Avenged Sevenfold</td>
<td class="download"><a href="http://www.youtube.com/watch?v=Fi_GN1pHCVc">Ouvir</a></td>
</tr>
<tr>
<td>Afterlife</td>
<td>Avenged Sevenfold</td>
<td class="download"><a href="http://www.youtube.com/watch?v=HIRNdveLnJI">Ouvir</a></td>
</tr>
<tr>
<td>Nightmare</td>
<td>Nightmare</td>
<td class="download"><a href="http://www.youtube.com/watch?v=94bGzWyHbu0">Ouvir</a></td>
</tr>
<tr>
<td>Welcome to the Family</td>
<td>Nightmare</td>
<td class="download"><a href="http://www.youtube.com/watch?v=1OZs7IoWTvc">Ouvir</a></td>
</tr>
</table>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div align="right">
<font size="2">text</font>
</div>
</div>
</body>
</html>
And here's the CSS 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;}
Any help's appreciated... Thanks in advance.
Answer
I think the simplest solution, rather than making the body element partially transparent, would be to add an extra div to hold the background, and change the opacity there, instead.
So you would add a div like:
<div id="background"></div>
And move your body element's background CSS to it, as well as some additional positioning properties, like this:
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('images/background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.8;
filter:alpha(opacity=80);
}
Here's an example: http://jsfiddle.net/nbVg4/4/