title: Fit background image to border HTML/CSS
body: <p>I am making a test webpage to learn html/css. I would like to make the image mold to the shape of the border. It should not be much of a problem but it seems as though the image in not centered in the border. As I change the image  size etc it seems as though the image is more so in the middle of the page and leaves the border etc. I just want it to fit perfectly in the border, and for the photo to be clipped along the borders edges. I am having problems with this.</p>
  
  <p>How can I make it so that the image is directly centers and fills the entire border without the middle of the photo or the majority of the photo being left outside of the border?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#pic {
      float:right;
      transform: rotate(90deg);
  }
  #bod {
      height:300px;
      width:300px;
      border: 5px ridge blue;
      float:right;
      border-radius: 105px 105px 0px 0px;
      overflow:hidden;
      background-image: url("smile.jpg");
      background-size: 800px 800px;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="bod"&gt;
      &lt;div id="pic"&gt;
          &lt;img src="http://lorempixel.com/800/500" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>