/    Sign up×
Community /Pin to ProfileBookmark

flash transparency / css background?

I’m playing around with Advanced effect maker – free flash tool.

But in IE 6 it seems that the ‘transparency’ and / or background color are ignored if you have a CSS background…

That is ODD.

Has anyone experienced this before?

John

to post a comment
CSS

12 Comments(s)

Copy linkTweet thisAlerts:
@smercerMay 13.2004 — Whenever I want to have a transparent image or animation I use Photoshop or it's sibling imageready.

You could proberbly hunt around for a different image editor, as they say "you get what you pay for".

You properbly do not have the money for something like photoshop but you could download a trial version (Photoshop has a steep learning curve) or you could try Gif Construction Set or Ulead GIF Animator 5 which is also shareware.
Copy linkTweet thisAlerts:
@BigjohnauthorMay 13.2004 — The background image is a painshop pro created JPG.

It's attached using the CSS background tag.

The Flash element is created with Advanced Effect Maker, and is positioned in the DIV.

In IE, the flash element shows in a solid white box (not transparent...). In Firefox, the element shows with no background (meaning it appears as if it's scrolling over the background image, as it should).

John
Copy linkTweet thisAlerts:
@smercerMay 13.2004 — you would be after this property:

{ background-attachment: scroll; }

Is that the one you are after or is it already in the CSS?
Copy linkTweet thisAlerts:
@BigjohnauthorMay 13.2004 — let me try to be more clear.

The CSS works just fine.

The DIV has it's background.

Within the DIV is the code to call the FLASH element (swf file).

In IE, the flash shows with a solid white background.

In Firefox, it works properly, with the flash element being transparent.

John
Copy linkTweet thisAlerts:
@RedWingsSuxMay 13.2004 — BigJohn,

I understand. Please paste the code which calls the Flash file so I can see what's going on. I may be able to help you.

Tim
Copy linkTweet thisAlerts:
@BigjohnauthorMay 13.2004 — This is everything between the <div> and </div>
<i>
</i>&lt;OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
WIDTH="200" HEIGHT="30"&gt;
&lt;PARAM NAME=movie VALUE="/images/john.swf"&gt;
&lt;PARAM NAME=quality VALUE="High"
&lt;PARAM NAME=wmode VALUE="transparent"
&lt;PARAM NAME=bgcolor VALUE="#C6C21E"&gt;
&lt;EMBED src="/images/john.swf" quality="High" wmode="transparent" bgcolor="#C6C21E"
WIDTH="200"
HEIGHT="30"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"&gt;
&lt;/EMBED&gt;
&lt;/OBJECT&gt;


I've tried setting bgcolor to 'transparent' too, but that does not seem to be a valid value.

This code works just fine over a css embeded background -- in firefox. In IE, it does not.

John


John
Copy linkTweet thisAlerts:
@JPnycMay 14.2004 — This may be related to a known bug in IE concerning backgrounds of divs.
Copy linkTweet thisAlerts:
@RedWingsSuxMay 14.2004 — Dear John,

2 things...

I would remove the instances of the BGCOLOR. Also, I noticed that in your code snippet, you were missing the close ">" on the QUALITY and the WMODE - but I assume that's not how your code it???

Otherwise, I don't think I can help you - it should work. The good news is this could be confined to a specific version of IE as DUNSEL has noted because IE was one of the first browsers to support WMODE/transparent as WMODE's support is spotty across browsers anyway.

<OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"

WIDTH="200" HEIGHT="30">

<PARAM NAME=movie VALUE="/images/john.swf">

<PARAM NAME=quality VALUE="High"

<PARAM NAME=wmode VALUE="transparent"

<PARAM NAME=bgcolor VALUE="#C6C21E">

<EMBED src="/images/john.swf" quality="High" wmode="transparent" bgcolor="#C6C21E"

WIDTH="200"

HEIGHT="30"

TYPE="application/x-shockwave-flash"

PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">

</EMBED>

</OBJECT>
Copy linkTweet thisAlerts:
@BigjohnauthorMay 14.2004 — [i]Originally posted by RedWingsSux [/i]

[B]Dear John,



2 things...



I would remove the instances of the BGCOLOR. Also, I noticed that in your code snippet, you were missing the close ">" on the QUALITY and the WMODE - but I assume that's not how your code it???



Otherwise, I don't think I can help you - it should work. The good news is this could be confined to a specific version of IE as DUNSEL has noted because IE was one of the first browsers to support WMODE/transparent as WMODE's support is spotty across browsers anyway.



<OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"

WIDTH="200" HEIGHT="30">

<PARAM NAME=movie VALUE="/images/john.swf">

<PARAM NAME=quality VALUE="High"

<PARAM NAME=wmode VALUE="transparent"

<PARAM NAME=bgcolor VALUE="#C6C21E">

<EMBED src="/images/john.swf" quality="High" wmode="transparent" bgcolor="#C6C21E"

WIDTH="200"

HEIGHT="30"

TYPE="application/x-shockwave-flash"

PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">

</EMBED>

</OBJECT> [/B]
[/QUOTE]


the Advanced Effect Maker applet created the code. I'll add the closing >, because as you know some applications ignore following statements when a > tag is missing...

I'll check back in the morning with more information!
Copy linkTweet thisAlerts:
@RedWingsSuxMay 14.2004 — Please do post the status, I'm curious as to why it's not working.

Good luck!
Copy linkTweet thisAlerts:
@BigjohnauthorMay 14.2004 — [i]Originally posted by RedWingsSux [/i]

[B]Please do post the status, I'm curious as to why it's not working.



Good luck! [/B]
[/QUOTE]


It was the missing ">"

Apparently FireFox was much more tolerant of them than IE.

Now I have to triple check that those were caused by the application... and if so, report a bug!
Copy linkTweet thisAlerts:
@dune44Jul 13.2005 — The reason it worked in Firefox is it doesn't require the line

<param name="wmode" VALUE="transparent">

only the wmode="transparent" in the embed tag.
×

Success!

Help @Bigjohn spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...