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)";
}
[MARKED AS SPAM BY ANTISPAM BEE | CSS Hack]
I definitely appreciate this unique post. I’ve been browsing all over just for this! Thank goodness I discovered it on Msn. You’ve made my day! Many thanks once again.
Hey guys its really good and it works.Thanks web.tutremix.com
Excellent post. Great codes.
hi there:
I need a big help. i tried several weeks to achieve the following:
having a slide show of pictures (thumbnails and forward function) with a drop down menu with transparency.
http://vniyellowpage.com/zng/ or http://vniyellowpage.com/zng/test
i need also the background color of the slideshow be the same as the background of the page.
thanks
Laurent
Try using background color on rgba. Also if you not doing for learning purpose you should try free jquery slider plugin. Here is a very good one http://css-tricks.com/anythingslider-jquery-plugin/ Also for web development related question and answers try this site http://stackoverflow.com/
I’ve always wanted to try the transparent background but was unsuccessful. I’ll try the steps provided and hopefully it will work this time.