How is this done?

1

hello! (-:

ok - take a look at this:
http://www.xeofreestyle.com/

the background is an image placed on the page (as opossed to a proper bg) and the swf is on the right hand side of the page

miraculously, the bg of the swf and the one on the page are aligned perfectly!!!

i’m trying to recreate this in dreamweaver: i have a 1kb img placed on the page and set to 100% width. however, when i place the swf on teh page, it shifts to the bottom of the image

how can i place it directly on top? these guys didn’t use layers -> if you select all on the webpage and make the browser smaller you can see that the swf moves freely to the left (i.e. it’s not held by a layer)

PS i’m assuming the swf has the same background image (otherwise that would mean having a transparent bg in flash - is that possible?)

anyone know how this is done? please?
=)

2

Okay you have to be kinda slick. This is done with tables. Make a table that has 2 columns and 2 rows. Make the table width 100%. In the top row second colomn set that width to what ever your flash is. In the top row first column set that width to 100%. Also set the height in the top row first and second column to what your flash is. Set the widths of the second row first and second column equal to the first row first and second column. Now to control your bgrd image of the first column in the first row. Use the same bgrd image you use in your flash. Since this area has to stretch to fit the screen resolution make sure you use a pattern that can tile seemlessly or is real big ill tell you why in a sec. Put this style on the first row first colum td


.yourstyle  {
     background-image: url(your.jpg);
     background-position: top;
     background-repeat: repeat-x;
}

The repeat x will tell it to scale only on the x plane which is what you want since the height is fixed. The position will align the image with upper left corner. Then once you have this you put another table in in the first row first column repeat this and make it look like layered images.

Always note to set your valign=top. makes it easier to align stuff. Let me know if you still have trouble. Also it is possible to have a transparent flash movie but it only works in ie.

3

3d-iva! thanks a lot for that!

why are you using 2 columns?

i’ve managed to get an ok version using the table, like you said - but i got lost when you talk about adding a style to a row (i don’t play much with dreamweaver)

ok, the only problem i have now is that the table doesn’t cover all the page, so i have a border around the table

looking at the source, i guess that’s what:
<body onLoad=“var SymTmpWinOpen = window.open; window.open = SymWinOpen; gotoBottom();; window.open = SymTmpWinOpen;” topmargin=0 leftmargin=0 rightmargin=0 marginheight=0 marginwidth=0 bottommargin=0>
is taking care of

ok, i’ll play around with it a little more

thanks again!
:beam:

4

that is why you would use 2 columns to allow one to stretch and one to stay fixed. In my example the flash would always be up against the right side where the tiling image will always be against the left side. Thus always taking up the full screen. The style sheet was to help with the positioning of your tiling image. You may not want it to tile in the y plane so you tell it to only scroll in the x plane. But I am glad it worked for you.

5

sorry - i meant rows - why 2 rows?

cheers
I:-)

6

Oh Yeah just in case you want some disclaimer info or something to always be at the bottom of the screen you could set the height of the table to 100% then set your first row to a set height. Then give your second row a height of 100% and set the valign=bottom. This will put info along the bottom no matter the screen resolution.

Also note you have to set all your margins to 0 for the best results.

7

cheers for that! you’ve been a great help!
:wink: