How to define an image, coming from the database and stored in binary, as background-image of a div?

Question

I have an image that is stored in the database of binary form. I rescued this image (through a select) and would like to insert it as a background-image of a div. I can only insert it as src of a img.

How to Store in the Database

$foto = $_FILES['foto']['name'];

if($this->__get('foto') != "")
{
		$binario = file_get_contents($this->__get('foto')); 
		$query = "UPDATE usuarios SET foto = :foto, nome = :nome, usuario = :usuario, telefone = :telefone, email = :email, email_alternativo = :email_alternativo, frase = :frase, senha = :senha, lembrete = :lembrete, biografia = :biografia ";
		$query .= "WHERE id = :id";
				
		$stmt = $this->db->prepare($query);
		$stmt->bindValue(':foto', $binario);
		$stmt->bindValue(':nome', $this->__get('nome'));
		$stmt->bindValue(':usuario', $this->__get('usuario'));
		$stmt->bindValue(':telefone', $this->__get('telefone'));
		$stmt->bindValue(':email', $this->__get('email'));
		$stmt->bindValue(':email_alternativo', $this->__get('email_alternativo'));
		$stmt->bindValue(':frase', $this->__get('frase'));
		$stmt->bindValue(':senha', $this->__get('senha'));
		$stmt->bindValue(':lembrete', $this->__get('lembrete'));
		$stmt->bindValue(':biografia', $this->__get('biografia'));
		$stmt->bindValue(':id', $this->__get('id'));
		$stmt->execute();		
}

Part I insert as an img src.

<?php
						
function dataURI($bin)
{
		return 'data: image/gif;base64,'.base64_encode( $bin );
}				
					
?>


  <div class="row mt-2">
    <div class="col-lg-12 text-center" id="div-foto-usuario">
      <?php								
		if(!empty($this->view->info_usuario['foto']))
		{										

			$foto = dataURI($this->view->info_usuario['foto']);
			
			echo "<img id='img-imagem-usuario' class='mr-2 border border-secondary' src='$foto' style='border-radius:50%;width:120px; height:120px;'>";				
		}
		else
		{
			echo "<img id='img-imagem-usuario' class='mr-2 border border-secondary' src='/img/usuario.jpg' style='border-radius:50%;width:120px; height:120px;'>";
		}
	?>
    </div>
  </div>

I would like to insert in the background-image of the div below:

<div class="row">
  <div class="col-lg-12" style="background-image: url(<?php echo $foto; ?>);">
  </div>
</div>

• I tried, in despair, to echo the variable that contains the image inside the url(), but it didn’t work.

• HTML code generated from page: Fiddle

Answer 1

If it was a normal URL, the value of url in the background-image it does not need to be enclosed by quotation marks, but in the case of Base64 it is necessary to.

Like the values of style of the div are delimited by double quotes, just you delimit the value of the url with single quotes:

background-image: url('<?php echo $foto; ?>');