Значок Responsove Значок для файла типа ввода

Question

У меня есть следующий css в мой файл типа ввода, где кнопка браузера заменяется изображением. Когда я изменяю размер экрана, так как высота и ширина - 40 пикселей, изображение не реагирует. Что нужно нужно сделать для изменения размера изображения в соответствии с Reen

CSS

<style> 
/*Css for upload file button*/ 
label.filebutton { 
    width:40px; 
    height:40px; 
    overflow:hidden; 
    position:relative; 
    background-image:url(/tukaiexotic/assets/img/ico/upload.png); 
    background-repeat: no-repeat; 

} 

label span input { 
    z-index: 999; 
    line-height: 0; 
    font-size: 40px; 
    position: absolute; 
    top: -2px; 
    left: -700px; 
    opacity: 0; 
    filter: alpha(opacity = 0); 
    -ms-filter: "alpha(opacity=0)"; 
    cursor: pointer; 
    _cursor: hand; 
    margin: 0; 
    padding:0; 
} 

</style> 

HTML

<label class="filebutton" style="text-align:center;"> 
    <span title="Upload Actual Image"> 
    <input type="file" accept="image/x-png, image/gif, image/jpeg" id="myfile" name="myfile" > 
    </span> 
</label> 

Answer 1

Использование

background-size:contain; 
background-position:center; 

для label.filebutton

Проверьте это: JSFiddle (попытайтесь изменить размеры результирующего кадра)