Cross Browser CSS Transparent Background – Quick Tips

Final Result

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)";
}
No TweetBacks yet. (Be the first to Tweet this post)

About Sisir

Hello! I am a freelance graphic designer, developer and engineer based on Bangladesh. I like my PC, my coffee cup and Internet.

,

6 Responses to Cross Browser CSS Transparent Background – Quick Tips

  1. Hydroizolacje August 24, 2011 at 1:28 pm #

    [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.

  2. venkat June 26, 2012 at 6:41 am #

    Hey guys its really good and it works.Thanks web.tutremix.com

  3. Hardy July 17, 2012 at 12:01 pm #

    Excellent post. Great codes.

  4. laurent August 23, 2012 at 8:36 am #

    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

  5. Rusty Craig October 26, 2012 at 5:32 am #

    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.

Leave a Reply

css.php