Flash in the background, not as background since it is still an object in a div and not placed via the css ‘background’ element. This is something new that I haven´t tried before, so please feel free to post your feedback. Below, you can see how I made the construction.
The html includes a ‘background’ div that contains the background Flash, a ‘header’ div for our second Flash, that´s on top of our background Flash, and a ‘content’ div for the actual content. It is important that the Flash object contains a parameter window mode ‘transparent’, so that the background of our Flash is invisible and makes the background below appear.The CSS part is actually very simple. I position the background as absolute and use a z-index in every div. Don´t forget to position the other divs as relative, otherwise the background is still on top of the header Flash. That´s all.I have seen posts on blogs that work with wmode transparent and others positioning the background as absolute or using negative margins. However, these did not result in the effect I desired for. This method has been tested on WinXP/Win2000 – IE6/Firefox2/Opera9 and MacOSX – Safari en Firefox2. Safari 2 apparently cannot determine whether the background or the header need to be placed in front. While Safari 3 beta can. That´s why –on the Lucid studios website- I detect the browser and serial number with Javascript. In case of Safari 2, a jpg is shown.Like I told you before, this is something new to me and it has only been tested on the abovementioned platforms. That´s why we kindly ask you to test this method on different platforms and let us know whether things run smoothly or not. We would be very grateful for you feedback!
Here you can find the 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=iso-8859-1″ />
<title>Lucid studios * webagency</title><style type=”text/css”>
<!–
#background {
z-index: 1;
position:absolute;}#header {
z-index: 2;
position: relative;
}#content {
position:relative;
z-index: 3;
}
–>
</style>
</head>
<body>
<div id=”background”>
<object …>
<param name=”wmode” value=”transparent” />
<embed … wmode=”transparent”></embed>
</object>
</div>
<div id=”header”>
<object …>
<param name=”wmode” value=”transparent” />
<embed … wmode=”transparent”></embed>
</object>
</div>
<div id=”content”>
content
</div>
</body>
</html>
September 29, 2008 at 8:53 pm
Kudos just meandered by….
Gotta love google very nice site….