# IE background not transparent or its a Flash bug

**URL:** <https://forum.kirupa.com/t/ie-background-not-transparent-or-its-a-flash-bug/326119>\
**Category:** web dev\
**Created:** [November 23, 2011, 8:03pm UTC](https://forum.kirupa.com/t/ie-background-not-transparent-or-its-a-flash-bug/326119 "2011-11-23T20:03:05Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![m2244](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@m2244](https://forum.kirupa.com/u/m2244)\
**Post date:** [November 23, 2011, 8:03pm UTC](https://forum.kirupa.com/t/ie-background-not-transparent-or-its-a-flash-bug/326119/1 "2011-11-23T20:03:05Z")

</div>

Hello,

I am having a problem where in IE (the pig) I can not get a transparent background. I may have a problem with my css or a div that I don’t see or understand. I have also read about a bug with IE9 and the wmode=transparent att not working.

Can anyone please help me out here. Thank you.

The HTML

```auto

	<div id="boxPup" style="left:225px;top:75px;"><!--These styles are needed here for the dragStart js function to get the initial location of the draggable div.--><!--class="box_transparent"-->
		<div class="bar" onmousedown="dragStart(event, 'boxPup')">Drag Box B</div>
		<div id="swfContainer">
			<object id="notUsedId" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="700px" height="550px" align="middle">
					<param name="allowScriptAccess" value="always" />
					<param name="allowFullScreen" value="false" />
					<param name="wmode" value="transparent" />
					<param name="movie" value="pop_up.swf" />
					<param name="quality" value="high" />
					<param name="scale" value="noscale" />
					<param name="salign" value="lt" />
					<param name="bgcolor" value="#ff0000" />
					<embed src="pop_up.swf" quality="high" scale="noscale" salign="lt" bgcolor="#ff0000" width="100%" height="100%" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" />
			</object>
		</div>
	</div>

```

The styles

```auto

/ ****This is the box that contains the popup SWF. If you change the width x height of the SWF, you must change the width of this box.**** /
#boxPup {
	position: absolute;
	background-color: #ffffff;
	width:700px;
	height:520px;
	/*color: #000000;*/
	padding: 0px;
	
	/ ***** <<< This is a fix for setting the background transparency, trying to hit all browser preferences. >>>>> */
	/* Fallback for web browsers that doesn't support RGBa */
	zoom:1;
	background-color: transparent;
	
	/**/
	background-color: rgb(255,255,255) transparent; 
	background-color: rgba(255,255,255, 0);
	
	/*background-color: rgb(0, 0, 0);
	 RGBa with 0.6 opacity 
	background-color: rgba(0, 0, 0, 0);*/
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff');
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff')";
	
	/*opacity: 0.5;
	filter:alpha(opacity=50);*/
}

.box_transparent{
	background-color: transparent;
	background-color: rgba(180, 180, 144, 0);  
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490); 
	zoom: 1;
}

/ ****This is the transparent dragger bar.****** /
.bar {
	position:absolute;
	top:59px;
	left:22px; /* This is how you control the position of the dragger div from the left */
	background-color: #008080;
	color: #ffffff;
	cursor: move;
	width:622px;
	padding: 10px 1em 10px 1em;
	
	/ ******************************************************
	These next 3 lines control opacity of the dragger bar. Turn them up to see the bar.
	filter:alpha(opacity=50); 
	-moz-opacity: 0.5; 
	opacity: 0.5;
	******************************************************* /
	filter:alpha(opacity=0); 
	-moz-opacity: 0; 
	opacity: 0;
}

#swfContainer{
	background-color: #ffffff;
	width:700px;
	height:520px;
	/*color: #000000;*/
	padding: 0px;
	
	/ ***** <<< This is a fix for setting the background transparency, trying to hit all browser preferences. >>>>> */
	/* Fallback for web browsers that doesn't support RGBa */
	zoom:1;
	background-color: transparent;
	
	/**/
	background-color: rgb(255,255,255) transparent; 
	background-color: rgba(255,255,255, 0);
	
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff');
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff')";
	
	/*opacity: 0.5;
	filter:alpha(opacity=50);*/
}

```