title: Keeping the image properly displayed when zooming (HTML)
body: <p>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)</p>
  
  <p>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.</p>
  
  <p>Before Zooming in:</p>
  
  <p><img src="https://i.stack.imgur.com/oaomL.jpg" alt="Before Zooming in"></p>
  
  <p>After Zooming in:
  <img src="https://i.stack.imgur.com/M9obP.jpg" alt="After Zooming in"></p>
  
  <p>The image that is used:</p>
  
  <p><img src="https://i.stack.imgur.com/oE3g3.jpg" alt="The image that is used"></p>
  
  <p>My code:</p>
  
  <pre><code>table cellspacing="0" cellpadding="0" class="myTable"&gt;
  &lt;tr&gt;
      &lt;td class="TopLeft"&gt;
      &lt;/td&gt;
      &lt;td class="Top"&gt;
      &lt;/td&gt;
      &lt;td class="TopRight"&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td class="Left"&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;table cellspacing="0" cellpadding="0"&gt;
              &lt;tr&gt;
                  &lt;td class="mTop" colspan="3"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="mLeft"&gt;
                  &lt;/td&gt;
                  &lt;td class="middle"&gt;
  
                  &lt;form id="Form1" runat="server"&gt;
  
                      &lt;div class="page"&gt;
  
                          &lt;div class="main"&gt;
                              ASDFGGH
                              &lt;asp:ContentPlaceHolder ID="MainContent" runat="server"/&gt;                                
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
  
  
  
                  &lt;/td&gt;
                  &lt;td class="mRight"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="mBottom" colspan="3"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/td&gt;
      &lt;td class="Right"&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td class="BottomLeft"&gt;
      &lt;/td&gt;
      &lt;td class="Bottom"&gt;
      &lt;/td&gt;
      &lt;td class="BottomRight"&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <p>And I will put only the CSS of the class: "Left"</p>
  
  <pre><code>.Left
  {
      width: 113px;
      height: 761px;
      background-image: url('../Images/L.jpg');    
  }
  </code></pre>
  
  <p>Thank you...</p>