PDA

View Full Version : [RESOLVED] Putting a .swf as a Background with CSS


SkaterKid
08-06-2008, 02:49 PM
Well this is my first post and I have came here because I have not been able to find help anywhere else. What I am trying to do is post stretch an .swf across the background of my web page. The most helpful sites I have been to were http://www.kirupa.com/forum/showthread.php?t=277976 and http://webdesign.about.com/od/css3/f/blfaqbgsize.htm my current non-working solution takes aspects from both site. My embed .swf is contained in a .html document in a div tag with named "background". I than tried to set it so that it would stretch the .swf to 100% width and 100% height. All I got was a smaller down sized version of the .swf.

Here is the .html:


<html>
<head>
<title>sPages Archive your Progress</title>
</head>
<link rel="stylesheet" type="text/css" href="main.css" title="Default">

<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>

<body>

<div id="background"><embed src="pictures/background.swf"> </div>

</body>


</html>



Here is the .css:


#background {
z-index: 1;
position:absolute;
width: 100%;
height: 100%;
}
#menu {
z-index: 2;
position:absolute;
background-color:#111111;
width: 150px;
height: 400px;
float:left;
top: 100px;
left: 20px;
}



The .css is on from the example from the site http://www.kirupa.com/forum/showthread.php?t=277976. Thanks for the help.

bradenkeithcom
08-06-2008, 03:31 PM
swf files can not be used as backgrounds.

SkaterKid
08-06-2008, 06:35 PM
But I am not technically using it as a background I am just stretching the embedded .swf to cover the hole screen like the two examples from the two links I provided. And this post isn't resolved!

rangana
08-06-2008, 08:51 PM
Try adding the highlighted:

<embed src="pictures/background.swf" style="height:100%;width:100%;">

SkaterKid
08-06-2008, 09:59 PM
No that just gives me the same effect as <embed src="http://mysite.orange.co.uk/coothead/heart/heart.swf" width=100% height=100%>. Which displays the animation as if it were 100% width and height not as if it were 100% of the screen. If the animation is only 200 pixels wide and high than thats as much space as it will cover. This site article on this site http://www.kirupa.com/developer/flash5/dhtmlflash.htm I think may have a working example. Still they provide little explanation on the problem. My web site means a lot to me and I really hope someone comes up with something soon. Thanks to ever one who is helping.

P.S. how come it still says my post is resolved?

Pegasus
08-06-2008, 10:11 PM
As far as I know, you can't stretch images on all browsers. Not yet, anyway. IE might be able to do it, but that's IE.

SkaterKid
08-06-2008, 11:29 PM
Pegasus, you are right! props you there. Well I just figured it out, sorta. It turns out that my .swf was actually stretched the hole time. Yeah don't I feel stupid! I guess when you publish it flash makes the stage about 30 pixels wider on each side so I saw white space. All I had to do was widen the animation and than I used rangana's method to complete the look. However as pointed out by Pegasus when stretching images and .swf's with this method and the method found on http://webdesign.about.com/od/css3/f/blfaqbgsize.htm for backgrounds, certain window sizes result in white space. Even though it takes quite some time to find the sizes that do I am just going to paint the background color the most common color of the animation and hope no one notices. Thanks for the help everyone and if you wanna check out a cool flash site go to www.thespages.com and tell me what you think its not completed but the background is an actual swf image. Although it doesn't do much yet I plan to make it completely interactive with some action script.

Pegasus
08-06-2008, 11:40 PM
Congrats. I'm glad you got it worked out.