Сделать изображение в блоке фоном jquery

Работая над очередным проектом я столкнулся с весьма забавной задачей — необходимо было сделать слайдер во всю высоту экрана, ну и естественно сохранить при этом responsible вёрстку сделанную к слову говоря на Bootstrap. Ну а поскольку карусель слайдера геренилась через Drupal & Views как вы сами понимаете, назначить изображение фоном не представлялось никакой возможности, ну или я как обычно поленился её найти.

В общем решение данной проблемы я как обычно возложил на старый добрый jQuery.

И так, что мы имеем:

Добавляем немного магии на jQuery:

jQuery(document).ready(function() {
$('.slide').css({'position': 'realative', 'width': '100%', 'height': '100%', 'display': 'block'});
$('div.slide img').each(function() {
var imgSrc = $(this).attr('src');
$(this).parent().css({'background': 'url('+imgSrc+') center center no-repeat', '-webkit-background-size': '100% ', '-moz-background-size': '100%', '-o-background-size': '100%', 'background-size': '100%', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover'});
$(this).remove();
});});

Получаем как и задумывали чт-то типа этого:

<div class="slide" style="background: url('/img/slide1.png');"></div>