title: Overflow:hidden not working
body: <p>When I run my code in a browser, the background is exactly where I already want it to be, the problem is that I can still scroll down, revealing the part of the background which is originally hidden. I need it so that the picture which I am trying to input does not come off the page, and does not reveal any more of the background.
  Here is my code (Sorry I know it's sloppy):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;XXX&lt;/title&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;style&gt;
      body {
          background-image:url("Images/Background2.png");
          background-size: cover;
              background-repeat: no-repeat;
  }
      .cf img.bottom:hover {
          opacity:0;
          overflow:hidden;
  }
  
      #container1 {
          position:relevant;
  }
      #positioning {
              position:absolute;
          Top:500px;
          Left:500px;
          Width:1000px;
          Height:600px;
          overflow:hidden;
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;IMG STYLE="position:absolute; TOP:38px; LEFT:90px; WIDTH:220px; HEIGHT:25px" SRC="Images\Logo.png" border:"0" draggable="false" style="-moz-user-select: none;"&gt;
          &lt;div class="cf"&gt;
              &lt;img class="top" IMG STYLE="position:absolute; TOP:255px; LEFT:106px; WIDTH:140px; HEIGHT:26px" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\Contact_001.png" border:"0" draggable="false" style="-moz-user-select: none;"&gt;
              &lt;img class="bottom" IMG STYLE="position:absolute; TOP:255px; LEFT:106px; WIDTH:140px; HEIGHT:26px" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\Contact_002.png" border:"0" draggable="false" style="-moz-user-select: none;"&gt;
              &lt;img class="top" IMG STYLE="position:absolute; TOP:355px; LEFT:105px; WIDTH:120px; HEIGHT:25px" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\About_001.png" border:"0" draggable="false" style="-moz-user-select: none;"&gt;
              &lt;img class="bottom" IMG STYLE="position:absolute; TOP:355px; LEFT:105px; WIDTH:120px; HEIGHT:25px" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\About_002.png" border:"0" draggable="false" style="-moz-user-select: none;"&gt;
              &lt;img class="top" IMG STYLE="position:absolute; TOP:455px; LEFT:108px; WIDTH:100px; HEIGHT:24px" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\Work_001.png" border:"0" draggable="false" style="-moz-user-select: none;"&gt;
              &lt;img class="bottom" IMG STYLE="position:absolute; TOP:455px; LEFT:108px; WIDTH:100px; HEIGHT:24px" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\Work_002.png" border:"0" draggable="false" style="-moz-user-select: none;"&gt;
              &lt;img class="top" IMG STYLE="position:absolute; TOP:555px; LEFT:115px; WIDTH:280px; HEIGHT:30px" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\WTU_001.png" border:"0" draggable="false" style="-moz-user-select: none;"&gt;
              &lt;img class="bottom" IMG STYLE="position:absolute; TOP:555px; LEFT:115px; WIDTH:280px; HEIGHT:30px" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\WTU_002.png" border:"0" draggable="false" style="-moz-user-select: none;"&gt;
          &lt;/div&gt;
  
              &lt;div id="container1"&gt;
                  &lt;div id="positioning"&gt;
                       &lt;img class="bottom" SRC="C:\Users\children\Desktop\PortfolioConcept_001\Images\Photoshop1.png"&gt;
       &lt;/div&gt;
   &lt;/div&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>I did not use a stylesheet at all, thanks in advance to anyone who trys to help.</p>