Help with HTML

**Ecinele** · 12-14-2007, 06:38 PM

Hi
I would like to know how to line up a background design with the SWF file like in this page:
http://www.template-help.com/screenshots/9100/9182.html
As you can see the lines in the background match with lines in the swf file.
Thanks
Ecinele

**yasunobu13** · 12-15-2007, 11:29 AM

Looking at the source, here's what they did

first they remove the margin around the page body

PHP Code:


<head>

<title>9182 intro preview</title>

<style type="text/css">

<!--

body {

    margin-left: 0px;

    margin-top: 0px;

    margin-right: 0px;

    margin-bottom: 0px;

}

-->

</style></head>

Then they create a table that will fill the entire viewport of the browser by making the width and the height 100%. The background of the table is then set to the background image, it gets centered and repeats along the x axis.

PHP Code:


<table width="100%" border="0" 

       cellpadding="0" cellspacing="0" 

       style="background-repeat:repeat-x; 

              background-position: center; height:100%; 

              background-image: url(9182-1.jpg)">

Then they add a cell to the table and set the table alignment to center the content horizontally and vertically

PHP Code:


 <tr>

    <td align="center" valign="middle"> SWF GOES HERE </td>

  </tr>

</table>

And that's it. As long as the background in the swf is also centered horizontally and vertically, the two should match up.

**Ecinele** · 12-15-2007, 02:04 PM

Thanks for your help
I noticed that the image is linked used background-image: url(9182-1.jpg)
how do you link to an image inside an image folder?
Ecinele

**yasunobu13** · 12-15-2007, 06:04 PM

it's exactly the same way you would do it in an img tag. If your image was under the images folder then you would use

PHP Code:


background-image: url(images/9182-1.jpg)

see w3schools for more info

**Ecinele** · 12-15-2007, 09:38 PM

Should the table be inserted like this?

<body>
<table width="100%" border="0"
cellpadding="0" cellspacing="0"
style="background-repeat:repeat-x;
background-position: center; height:100%;
background-image: url(images/main_bkg.jpg)">
</body>

If I insert a table the conventional way, dreamweaver doesn't give me an option for the specs you have here.

**Ecinele** · 12-16-2007, 02:22 AM

Thanks for your help. It did work.
Ecinele

Thread: Help with HTML

Thread Tools

Display

Help with HTML

Posting Permissions