title: call PHP image as CSS background-image: url
body: <p>I have the following code in my html markup : </p>
  
  <pre><code>&lt;div class="profile-img"&gt;
      &lt;img src="&lt;?php echo $user_meta['profilepicture'][0]; ?&gt;" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This code generates a profile image or avatar. </p>
  
  <p>I'd like to use it into CSS as a background image.</p>
  
  <p>So this is what I am trying to use :</p>
  
  <pre><code>&lt;div class="profile-img"&gt;
       &lt;style type="text/css"&gt;
          .profile-img img { background-image: url('&lt;?php echo $user_meta['profilepicture'][0]; ?&gt;'); }
       &lt;/style&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS then looks like this :</p>
  
  <pre><code>.profile-img {
  width: 90px;
  height: 90px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-top: 15px;
  }
  
  .profile-img img {
  width: 80px;
  height: 80px;
  padding: 5px !important;
  background: #fff !important;
  border: none !important;
  border-radius:500px;
  -moz-border-radius:500px;
  -webkit-border-radius:500px;
  background-position: center center;
  }
  </code></pre>
  
  <p>What I am trying to achieve is a round image thumbnail - avatar with proportionally cropped image.</p>
  
  <p>But it seems that the code I am trying to use to call the image into CSS doesn't do the trick.</p>
  
  <p>Where am I going wrong here ?</p>