It's not the background image that is moving, it's the page content. And
it's not dependent on the browser being used, it's dependent on the width of
the browser viewport (the page content area). View your page, and change
the width of the browser by dragging the right-hand, bottom corner of the
un-maximized browser window. You'll see the form itself stays completely
fixed on the screen while the rest of the content moves around.
That is happening because you have built your form inside of an absolutely
positioned container (called a layer - it's actually just a <div> tag. That
element takes its position from (in your case) the upper, left-hand corner
of the viewport, and that's where it stays. The rest of the page content is
within a center aligned table -
<table width="700" border="1" align="center"
which moves to a new center point as the viewport width is changed, but the
layer is absolutely positioned, so it doesn't move.
I'm sorry to tell you that there is alot that is wrong with this page,
though. The validator finds 148 errors, unfortunately. Before you can
begin to worry about layout issues, you would have to make sure that your
page can be properly validated.
In general, however, keep these guidelines in mind -
1. Do not use positioned elements AND centered elements until you
understand how CSS positioning works.
2. Do not ever place an absolutely positioned element directly into a table
cell.
3. Make sure that the doctype you select for a page is consistent with your
ability to develop code using the standards specified by the doctype (this
is the source of MANY of the errors you have).
4. Do not edit a page's code in code view until you have a fairly solid
understanding of HTML (some of the errors you have MUST have been caused by
doing this).
Make sense?
