placing background image in a rhombus shaped container is causing the container to lose its shape

The title sums it up pretty much, I can get the rhombus drawn easily enough but when I add an image to the background it adds more sides to the shape. I can't seem to figure out why this is happening when the background image is added. Any advice would be appreciated

Here is the code I have, excuse the inline css I am only doing it like this until I have a working solution then I will transfer the css into the external css file.

A demo can be found here

 <div class="row">
<div class="col-sm-4" >
<div style=" margin:50px auto;
 width:200px;
 height:200px;
 overflow:hidden;
 border-radius: 28px;
 transform: rotate(45deg);
 -ms-transform: rotate(45deg); 
 -webkit-transform: rotate(45deg);">

<img src="images/stripsResize.jpg" alt="Chicken Strips" style="transform: 
 rotate(-45deg);
 -ms-transform: rotate(-45deg); 
 -webkit-transform: rotate(-45deg); 
  top:-100px;
  left:-100px;">
 </div>
</div>

<div class="col-sm-4">
<div style="width:200px;
 height:200px;
 overflow:hidden;
 border-radius: 28px;
 transform: rotate(45deg);
 -ms-transform: rotate(45deg); 
 -webkit-transform: rotate(45deg); 
 background-color: green;">
</div>
</div>
<div class="col-sm-4">
 <h1>Desert</h1>
</div>
</div>

You need to increase the width/height of the image and you may consider flexbox to easily center it. It then overflow equally from the 4 sides and it will cover the gap:

.box {
  margin: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 1px solid;
  border-radius: 20px;
  overflow: hidden;
  transform: rotate(45deg);
}

.box img {
  transform: rotate(-45deg);
  width: 141%;
  height: 141%;
  flex-shrink: 0;
}

<div class="box">
  <img src="https://picsum.photos/200/200?image=1069">
</div>

Why exactly 141%?

To be more precise and accurate it's exactly sqrt(2) * 100% ~ 141%. Here is an illustration to better understand (I removed the border-radiusand applied only rotation to both box and image):

The green line is the width we want to caclulate (or the height since we have a square) and the red lines are the width/height of the box and Pythagore said that the formula is W² = h² + w² and h = w so we have W = sqrt(2) * h.

If you want to be more accurate we can also reduce the space created by border-radius. Considering how radius works we can draw this illustration:

The red lines define the value of border-radius (20px in this case). The green line is equal to sqrt(2)*20px [using the previous formula] and the distance we need to remove (defined by the orange line) is simply sqrt(2)*20px - 20px ~ 0.41 * 20px ~ 8.28px. So the final code could be:

.box {
  margin: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 1px solid;
  border-radius: 20px;
  overflow: hidden;
  transform: rotate(45deg);
}

.box img {
  transform: rotate(-45deg);
  width: calc(141% - 8.28px);
  height: calc(141% - 8.28px);
  flex-shrink: 0;
}

<div class="box">
  <img src="https://picsum.photos/200/200?image=1069">
</div>

^{The above formula works only for this particular and easy case. The calculation may become more complex for other situation}