title: Background Image centered on resize, scale kept
body: <p>I hope this is simple but here is the code I'm doing and it works perfectly except for one thing, the scale isn't kept.  It gets wide and then looks silly.</p>
  
  <pre><code>.div1 {
  background-image: url("images/headerbgimage2.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  }
  </code></pre>
  
  <p>The image scales when resized and on smaller sizes it looks normal but as it gets bigger (wider) it stretches and looks awkward.  How can I make it so the image keeps its aspect and just "zooms" in on itself keeping the whole div covered and the image scaled.</p>
  
  <p>An example of this working on a site is techhubdenver .com with their top div background image</p>
  
  <p>Can this be done with CSS or will I need to get some Javascript coding going to do this.</p>
  
  <p>I know how to make new images for responsive type pages but I was hoping to just use one image and have it work no matter the device.  it only becomes a problem when the screen size is way off from the image size (too small or too wide).</p>
  
  <p>if the image would just "shrink" but keep aspect ratio for smaller devices I think it would work and if the image would just "zoom in" staying on the center of the image when the screen size gets to large i think it would work good.</p>
  
  <p>Keep aspect ratio and always fill the div (okay to zoom in) is my goal here.</p>