background image not scaling with window size

So basically I have a very large image (over 3000 x 2000) and I set it as a background image and want it to scale responsively with window resizing. However, it still wants to stay at it's original resolution (with the right side clipped off the screen and hidden) even when I set the width to 100% and the container to max-width 100%

html

<div class="container-fluid">
  <div id="image-container">
  </div>
</div>

css

.container-fluid {
  height: 100%;
  width: 100%;
  padding: 0;
  }

#image-container {
  background-image: url(../img/bg.png);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
  }

I did edit bootstrap's .container-fluid a bit to get rid of its default 15px padding and the fact that it had no width or height. I'm not exactly sure if bootstrap has some properties that might be causing it, but when I look in the debugger the computed width that's making it so huge is the width property in #image-container which is just set to 100%. But it does not have a parent that is set to larger than the viewport that I am aware of. (setting max-width: 100%; on the container just makes the image vanish)