Max-width and background-size property

guys! I have, obviously, a problem. I wrote a page that have content generated from Sharepoint list. Its width can differ so I put min-width and max-width on parent div. Inside this div I have an empty div that has background-image and background-size: cover; set. Problem is that this image always show up with width size equal to that size set with max-width on parent div. Other child divs has that contain generated text show up with width appropriate to its content. Image div has width: 100%; set. Can you tell how can I achieve that this background image will fit its size to container width? Of course I checked and div with this image as background has correct width, but background overflows this div. Below I posted code for parent and image div:

 .page {
  min-width: 874px;
  max-width: 1200px;
  height: 800px;
  margin: auto;
  padding-left: 160px;
}

.upperImage {
  display: block;
  width: 100%;
  height: 70px;
  clear: both;
  background-image: url("imageUrl");
  background-size: cover;
  background-position: center;
} 

Any ideas? I tried to achieve it using javascript and element.style.backgroundSize property but it didn't work, I couldn't even get it to return current size.