Full width background image with proper aspect ratio

I'm having an issue getting a full-width background image to retain its proper aspect ratio, and I've tried just about everything I could think of.

On the page I have an image with a CSS class called full-bg. (The reason I'm using an image is that the page is randomly calling the image from a Wordpress query with text that is then displayed on top of it, later in the page HTML.)

I'm using fairly standard CSS I've seen all over the place, but when you resize the browser to different widths, the background image is being skewed so the aspect ratio is no longer right.

Here is the image, and the CSS, any ideas what I can do?

<img class="full-bg active hide-for-small" src="/wp-content/uploads/2013/06/Red.jpg">

img.full-bg {
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.full-bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

NOTE: I just realized one complication that may be causing issues. I'm using Foundation on the site, which automatically resizes images as the screen size shrinks. It normally resizes images to maintain their aspect ratio, but perhaps it's adding to the complexity of the issue?

Solution

You should use background-size: contain; or cover, depending on what you need. More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Note that if it's a background image, you should probably actually make it a background-image on a container.