Установить фоновое изображение родительского div на основе атрибута дочернего div при наведении курсора

У меня это почему-то не хочет работать. У меня есть код ниже.

При наведении курсора на div homeShowingWrapper фон div homeHero должен измениться на значение атрибута data-featured-image div homeShowingWrapper.

Вот моя структура HTML:

<div id = "homeHero">
    <div class = "homeShowingWrapper" data-featured-image = "/uploads/Hover-Background.jpg">
        Content
    </div>
</div>

И моя функция JQuery:

jQuery( document ).ready( function( $ ) {

    $("#homeHero").css("background-image" , "url(/uploads/Initial-Background.jpg);");

    $(".homeShowingWrapper").mouseover(function() {

        // Background-image
        var background = $(this).attr('data-featured-image');

        $("#homeHero").css("background-image" , "url(" + background + ");");

    });

});

Любая идея, почему строка $("#homeHero").css("background-image" , "url(" + background + ");"); не применяет фоновое изображение?