как-то так.
Яваскрипт должен быть или под всеми тэгами с которыми он будет работать, или же должен вызываться по событию загрузки страницы.
<html>
<body>
<img class="bg-image" src="http://s.pikabu.ru/images/logo2013.png" width="155" height="52">
<img class="bg-image" src="http://s.pikabu.ru/images/logo2013.png" width="155" height="52">
<img class="bg-image" src="http://s.pikabu.ru/images/logo2013.png" width="155" height="52">
<script>
imgs = document.getElementsByClassName('bg-image'); // получаем массив <img'ов
if(imgs.length>0)
{
for(var i=imgs.length-1; i >= 0 ; i--) // в цикле идем задом наперед, чтоб корректно срабатывало удаление элемента
{
var div_img = document.createElement('div') // создаем новый DOM элемент (div)
div_img.className='slides-fullscreen-img overlay-black' // даем нужные классы
div_img.style.background= "url('"+imgs[i].src+"')"; // прописываем нужные стили
div_img.style.backgroundSize= "cover";
div_img.style.width= imgs[i].width+"px ";
div_img.style.height= imgs[i].height+"px ";
document.body.appendChild(div_img); // подсовываем созданный <div> внутрь body
document.body.removeChild(imgs[i]) // удаляем картинку
}
}
</script>
</body>
</html>
