How can I make my div's svg background image scale dynamically and stay in the center of the div

I'm currently working on the following website design:

I have two sections (top and bottom) that are both divided into two sections (icon and content). I'm trying to use a centered svg image in the icon section although the image gets cut off whenever the size of the viewing area/browser window changes. How can I prevent this from happening?

Here is what I am currently using:

Example - js fiddle link

SVG Image - svg image

HTML -

<div id="main1">
   <div id="icon1">&#160;</div>​ 
   <div id="links1">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
   </div>
</div>
<br/>
<div id="main2">
   <div id="icon2">​​​</div>
   <div id="links2">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
   </div>
</div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
   <div class="ms-rtestate-notify  ms-rtestate-read a64b9522-0ca6-4ff7-a9fc-67a7a27d3071" id="div_a64b9522-0ca6-4ff7-a9fc-67a7a27d3071" unselectable="on">
   </div>
   <div id="vid_a64b9522-0ca6-4ff7-a9fc-67a7a27d3071" unselectable="on" style="display: none;">
   </div>
</div>

CSS -

<style>
#main1 > div { min-height: 100px; }
#main1 {
    /* overflow to handle inner floating block */
    overflow: hidden;
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px; 
    margin-right: 5%;
    margin-left: 5%;
}

#icon1 {
    float: left;
    width: 29%;
    border-right:thin solid red;
}

#links1 {
    float: right;
    width: 70%;
}
#main2 > div { min-height: 100px; }
#main2 {
    /* overflow to handle inner floating block */
    overflow: hidden;
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px; 
    margin-right: 5%;
    margin-left: 5%;
}

#icon2 {
    float: left;
    width: 29%;
    border-right:thin solid red;
    /* background: url('/support/Shared%20Documents/065__calendar.svg') no-repeat center; */
    background-image: url('/support/Shared%20Documents/065__calendar_crop.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

#links2 {
    float: right;
    width: 70%;
}
</style>