Final Result
Details
- Program: Adobe Dreamweaver or any other text editor
- Technology: HTML, CSS
- Difficulty: Beginner
Step 1: Setting Up The Environment
Make a parent div with any uneven background image so you can see the transparency of the child div. Add basic styles to the parent and child div.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cross Browser CSS Transparent Background - Quick Tips</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
</head>
<body>
<div id="container">
<div class="child">
<h1>Graphics Remix</h1>
</div>
</div>
</body>
</html>
It is always good practice to separate the IE specific styles to a different css file using the conditionals.
#container{
background:url(images/bg.gif) repeat;
padding:50px;
}
h1{
font-family:Arial, Helvetica, sans-serif;
color:#333;
text-align:center;
}
.child{
width: 200px;
margin: auto;
border:1px solid #888;
}
Step 2: Create The Transparent Background
Lets create the transparent background in the child element. Using RGBA color definition should do the trick for all modern browsers except our friend from hell IE! rgba(red, green, blue, alpha);
.child{
width: 200px;
margin: auto;
border:1px solid #888;
background:#FFF; /* fallback for browser that not support rgba */
background: rgba(255,255,255, .5); /* Works on all modern browsers */
}
Step 3: Transparent Background in IE
We have to use Microsoft filter for it. Add this css to ie.css and you will have your cross browser transparent background.
.child{
background: transparent\9; /* clear current background for ie */
zoom:1; /* required for the filters */
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#77FFFFFF, endColorstr=#77FFFFFF);
/* For IE 8*/
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#77FFFFFF, endColorstr=#77FFFFFF)";
}
As you see we have used Microsoft gradient filter. Start Color and End Color is same so the background will appear to be one color with no gradient. But using this technique you can also make gradient in IE browsers. The eight character Hex code is represents rgba color. The first two character is the opacity information of the color and next four character is represents normal rgb hex code that we generally use.
Final Code
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cross Browser CSS Transparent Background - Quick Tips</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
</head>
<body>
<div id="container">
<div class="child">
<h1>Graphics Remix</h1>
</div>
</div>
</body>
</html>
CSS:
#container{
background:url(images/bg.gif) repeat;
padding:50px;
}
h1{
font-family:Arial, Helvetica, sans-serif;
color:#333;
text-align:center;
}
.child{
width: 200px;
margin: auto;
border:1px solid #888;
background:#FFF; /* fallback for browser that not support rgba */
background:rgb(255,255,255);
background: rgba(255,255,255, .5); /* Works on all modern browsers */
}
CSS: IE specific
.child{
background: transparent\9; /* clear current background for ie */
zoom:1; /* required for the filters */
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#77FFFFFF, endColorstr=#77FFFFFF);
/* For IE 8*/
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#77FFFFFF, endColorstr=#77FFFFFF)";
}