Keeping the image properly displayed when zooming (HTML)

I have a web page with a form tag. Outside the form tag (in the body) I wanted to set a background image to the left of the form tag (the goal of that background image is to gradient from the back-color of the body which is black to the form color which is Grey)

My problem is that when 'zooming in' the browser, (obviously the zoom goes toward the form), I expect the image to be out of the screen gradually, but the fact is that the image is still displayed but it goes darker as I zoom in. At the end the left edge of the screen becomes black. I looks like the image does not accept to leave the screen.

Before Zooming in:

After Zooming in:

The image that is used:

My code:

table cellspacing="0" cellpadding="0" class="myTable">
<tr>
    <td class="TopLeft">
    </td>
    <td class="Top">
    </td>
    <td class="TopRight">
    </td>
</tr>
<tr>
    <td class="Left">
    </td>
    <td>
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td class="mTop" colspan="3">
                </td>
            </tr>
            <tr>
                <td class="mLeft">
                </td>
                <td class="middle">

                <form id="Form1" runat="server">

                    <div class="page">

                        <div class="main">
                            ASDFGGH
                            <asp:ContentPlaceHo开发者_运维问答lder ID="MainContent" runat="server"/>                                

                        </div>
                    </div>
                </form>



                </td>
                <td class="mRight">
                </td>
            </tr>
            <tr>
                <td class="mBottom" colspan="3">
                </td>
            </tr>
        </table>
    </td>
    <td class="Right">
    </td>
</tr>
<tr>
    <td class="BottomLeft">
    </td>
    <td class="Bottom">
    </td>
    <td class="BottomRight">
    </td>
</tr>

And I will put only the CSS of the class: "Left"

.Left
{
    width: 113px;
    height: 761px;
    background-image: url('../Images/L.jpg');    
}

Thank you...

I'm not sure that this is a question that can have a definite answer. There is no accepted standard for how a browser should zoom in on a page. Firefox, IE, and Chrome all do it differently. Is the problem the same in other browsers besides Firefox?

You might also want to consider reworking your code so that it uses divs instead of tables to lay out the page, though that will take some energy. That might result in a page that will zoom as you expect it to.

Is there a place we can go to see all the code, so that we can fiddle with it and perhaps more easily identify a potential solution?

Finally... the problem is concerned in the CSS property: "background-position" that is set to left by default. So I set

background-position: right;

And the problem is solved