In the HTML file
<input type='file' id='getval' name="background-image" /><br/><br/>
<div id='clock'></div>
Write the corresponding CSS file
#clock{
background-image:url('');
background-size:cover;
background-position: center;
height: 250px; width: 250px;
border: 1px solid #bbb;
}
The corresponding JavaScript is
document.getElementById('getval').addEventListener('change', readURL, true);
function readURL(){
var file = document.getElementById("getval").files[0];
var reader = new FileReader();
reader.onloadend = function(){
document.getElementById('clock').style.backgroundImage = "url(" + reader.result + ")";
}
if(file){
reader.readAsDataURL(file);
}else{
}
}
This may solve your problem
<code>[JS FIDDLE][1]</code>
**HTML**
<input type='file' id='getval' name="background-image" /><br/><br/>
<div id='clock'></div>
**CSS**
#clock{
background-image:url('');
background-size:cover;
background-position: center;
height: 250px; width: 250px;
border: 1px solid #bbb;
}
**PURE JAVASCRIPT**
document.getElementById('getval').addEventListener('change', readURL, true);
function readURL(){
var file = document.getElementById("getval").files[0];
var reader = new FileReader();
reader.onloadend = function(){
document.getElementById('clock').style.backgroundImage = "url(" + reader.result + ")";
}
if(file){
reader.readAsDataURL(file);
}else{
}
}
[1]: http://jsfiddle.net/f2L3L3mu/
