backround image is autmatically set to the hight of the box, setings ignored

When adding a background image (front or back) to a flipbox, the settings regarding the size of the image are ignored. Instead, the image seems to “inherit” the ‘hight’ value of the box itself (I tried to set the box hight manually, and the image gets the same value.

Below is a sample of the html output that is being generated (the original image size is 300px x 80px).

Thanks for any ideas on a reason for this behavior, and how to solve this issue.

<div class="cl-flipbox animation_cardflip direction_w valign_top" style="width:100%;">
<div class="cl-flipbox-h easing_easeInOutSine" style="-webkit-transition-duration:500ms;transition-duration:500ms;">
<div class="cl-flipbox-hh">
<div class="cl-flipbox-front" style="padding: 15%; background-color: rgb(255, 255, 255); background-image: url("https://mysite.com/wp-content/uploads/sites/26/2017/03/thiswayup-2014-300x80.jpg"); height: 360px;">
<div class="cl-flipbox-front-h"></div>
</div>
<div class="cl-flipbox-back" style="padding:15%;background-image:url("https://mysite.com/wp-content/uploads/sites/26/2017/03/ceo-cf-300x79.jpg");">
<div class="cl-flipbox-back-h">
<h4 class="cl-flipbox-back-title">title for backend</h4>
<p class="cl-flipbox-back-desc">backend description</p>
</div>
</div>
</div>
</div>
</div>