title: Responsive div with width and height set
body: <p>I am using foundation 4 as a framework for my personal site (not 100% portfolio site, more as advertising myself as a freelancer) and I have a contact box with a background image set and these CSS styles applied:</p>
  
  <pre><code>#contact-box {width: 1052px;
        height: 400px;
        background-image: url('../images/contact-bg.png');
        margin-top: 150px;}
  </code></pre>
  
  <p>I want to make it so it scales down when you shrink the browser, but instead it just gives me a horizontal scrollbar and doesn't scale at all and I know it's because of the 1052px width set... So how would I code this out so it's responsive? If I use max width and max height it breaks the div and removes its bg image. The contact box has a contact form in it (which is responsive) along with a phone number, email, and 3 social icons. </p>