Force div to have the size of background image

Well, the reason why this is?

In your working example you use content. A content has it's own height and uses up space, which the other elements on the page have to respect.

With the background-image solution, you use a background, which does not use space. The .imageContainer2 element can not know about the height of the background-image AND adapt itself to it.

This very problem was addressed here: How to get div height to auto-adjust to background size?
Just check, if the workaround is suitable for you

If the image(s) you want to display in the background property always has the same aspect ratio, you can use one of the techniques explained here to make the div keep the same aspect ratio as the image according to the width.

With your example it would look like this :

body, html {
  height: 100%;
  margin: 0px;
}
.imageContainer2 {
  background-image: url("http://i.imgur.com/AWi7r5m.jpg");
  background-position: center top;
  background-size: auto 100%;
  padding-bottom:178%;
  background-repeat:no-repeat;
}

<div class="imageContainer2"></div>

Note that I don't know what you are trying to achieve exaclty. Using this method to display an image probably isn't semanticaly correct depending on the context.