100% height and 100% width of Browser

by **breastfed** » Mon May 04, 2009 11:56 am

Hello

after 1 Hours trying several "Tips" from Forums i need to write you here...

I want to create a Flash Page with the Dimensions 600*400 - in the Background there should be a texture of wood.

Now i want this Texture to be 100% * 100% of my Browser's Dimension without resizing the Centerbox, the page.

As you can see in the Attachement it is not working for me.

Please help me out guys.

Thanks!

by **Andy** » Mon May 04, 2009 12:17 pm

Well, you didn't provide an attachment but I'll attempt to answer anyway:
(I'll illustrate the example using a div)

Code: Select all: html, body { height: 100%; margin: 0; padding: 0; } #test { background: green; height: 100%; }

Code: Select all: <div id="test" />

by **breastfed** » Mon May 04, 2009 12:20 pm

What parameters do i have to give the Movie inside Flash and inside the HTML (not the css) ?

by **Fruityger** » Mon May 04, 2009 12:22 pm

Do you need the wood texture to scroll if your content is very large (+600px height) or will this never happen?

I have a solution for an absolute positioned background div that also works in IE6.

Javascript

Code: Select all: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; var params = {}; params.wmode = "transparent"; params.quality = "high"; var attributes = {}; swfobject.embedSWF("swf/myflashbackground.swf", "bg", "100%", "100%", "9.0.0",false, flashvars, params, attributes); </script>

css

Code: Select all: #bg { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; z-index:9; } #flash-background { height: 100%; } #wrap { padding-top:0px; position:relative; margin:0px auto; width:800px; z-index:23; }

HTML

Code: Select all:  <div id="bg"> <div id="flash-background"></div> </div>  <div id="wrap"> ... ... ...

by **breastfed** » Mon May 04, 2009 12:36 pm

I might not be clear enough.

This site for example:
http://www.ciriljazbec.com/

The Background is 100% * 100%

Your Code didn't work

by **Andy** » Mon May 04, 2009 12:50 pm

breastfed wrote:I might not be clear enough.

This site for example:
http://www.ciriljazbec.com/

The Background is 100% * 100%

Your Code didn't work

Code: Select all: html, body { height: 100%; margin: 0; padding: 0; }

Code: Select all: <body id="flashcontent"> This will be overwritten with a flash video. <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var so = new SWFObject("so_tester.swf", "mymovie", "100%", "100%", "8", "#336699"); so.write("flashcontent"); </script> </body>

And finally download SWFObject here.

Welcome!

Smashing Links

Statistics

TOP POSTERS

100% height and 100% width of Browser

100% height and 100% width of Browser

Re: 100% height and 100% width of Browser

Re: 100% height and 100% width of Browser

Re: 100% height and 100% width of Browser

Re: 100% height and 100% width of Browser

Re: 100% height and 100% width of Browser

Who is online