title: How to define an image from the database stored in binary as a div background image?
body: <p>I have an image that is stored in the database in <strong>binary form</strong>. I have rescued this image (with a select) and would like to insert it as a div's <strong>background image</strong>. I can only enter it as src of an img.</p>
  
  <p><strong>How to Store in Database:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  
  $foto = $_FILES['image']['name'];
  
  if($this-&gt;__get('image') != "")
  {
    $binary = file_get_contents($this-&gt;__get('foto')); 
    $query = "UPDATE usuarios SET image = :image, name = :name" ;
    $query .= "WHERE id = :id";
      
    $stmt = $this-&gt;db-&gt;prepare($query);
    $stmt-&gt;bindValue(':image', $binary);
    $stmt-&gt;bindValue(':name', $this-&gt;__get('name')); 
    $stmt-&gt;bindValue(':id', $this-&gt;__get('id'));
    $stmt-&gt;execute();  
  }
  
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Part I enter as src of an img. (
  it's working)</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
        
  function dataURI($bin)
  {
    return 'data: image/gif;base64,'.base64_encode( $bin );
  }    
       
  ?&gt;
  
    &lt;div class="row mt-2"&gt;
      &lt;div class="col-lg-12 text-center" id="div-foto-usuario"&gt;
        &lt;?php        
        if(!empty($this-&gt;view-&gt;info_usuario['image']))
        {          
  
       $image = dataURI($this-&gt;view-&gt;info_usuario['image']);
     
       echo "&lt;img id='img-image-user' class='mr-2 border border-secondary' src='$image' style='border-radius:50%;width:120px; height:120px;'&gt;";    
      }
      else
      {
       echo "&lt;img id='img-image-user' class='mr-2 border border-secondary' src='/img/user.jpg' style='border-radius:50%;width:120px; height:120px;'&gt;";
      }
      ?&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>I would like to insert in the div background-image below: (The problem)</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="col-lg-12" style="background-image: url(&lt;?php echo $foto;?&gt;);"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li><p>I tried to echo the variable that contains the image inside the url (), but it didn't work out.</p></li>
  <li><p>Generated Page HTML Code:<a href="https://jsfiddle.net/6d0jyaup/" rel="nofollow noreferrer">Fiddle</a></p></li>
  <li><p>I am brazilian. I don't speak english. I used the google translate.</p></li>
  </ul>