Como reemplazar input file con imagen

[jolijun]

Te dejo el ejemplo que hice en jsfiddle: https://jsfiddle.net/nhfggdva/

Código HTML:

<div class="input-file">
    <label for="file1"></label>
    <input id="file1" type="file" />
</div>
 

Código CSS:

.input-file {
     width: 200px;
     height: 200px;    
}
 
.input-file label {
     width: 100%;
     height: 100%;
     display: block;
     background: transparent url(http://vignette4.wikia.nocookie.net/fable/images/5/53/Image_Upload.png/revision/latest?cb=20101002231116) no-repeat center center;
}
 
.input-file input[type=file] {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
}