Good afternoon community!
I need to know if there is a way to use an image loaded in an input file to preview it but not in an img tag, but to put the image as the background-image of a div.
Formerly in the project if I loaded the preview in an img in the following way
The input file
<div class="form-group">
<input id="file_url" type="file" name="foto">
</div>
<div class="card-carga hide" id="contenedor_noticia2">
<div class="card__father">
<div class="card">
<div class="card__front" id="fondo-card">
<div class="bg"></div>
<div class="body__card__front">
<h2 id="titulo_noticia2"></h2>
</div>
</div>
<div class="card__back">
<div class="body__card__back">
<p id="texto_noticia2"></p>
<a id="link_noticia2" href="#!" target="blank_" class="btn btn-primary" role="button">Leer más</a>
</div>
</div>
</div>
</div>
</div>
function mostrarImagen(input) {;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_destino2').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#file_url").change(function(){
$('#contenedor_noticia').removeClass("hide");
$('#contenedor_noticia').addClass("show");
$('#contenedor_noticia2').removeClass("hide");
$('#contenedor_noticia2').addClass("show");
mostrarImagen(this);
});
I came up with the following options
$('#fondo-card').css("background-image", "url(e.target.result)");
$('#fondo-card').css("background-image", "url('e.target.result')");
var div= document.getElementById("div");
imagen.style.backgroundImage = "url('e.target.result')";
Cheers! Gustavo Duarte