背景画像のURLが空の時 の指定の仕方を教えてもらいたいです

前提

CMS対応のスライドショーを作っています。
登録した画像は背景画像 style="background-image:url("") として表示されるようにしています。

CSSなどのやり方が下手なのもあるかと思うのですが、画像が1枚も登録されてない場合でもスライドショーの高さ分の余白ができてしまうので、スライドショーのボックスが非表示になるようにしたいです。

<div id="slideshow@@@ItemID@@@" class="slideshow"> <div class="mainView rectangle_img"> <div class="mainImg mainImg1 normal_img img_tool" style="background-image: url(@@@image1@@@);background-size: contain;background-repeat: no-repeat;background-position: 50% 50%;"><a href="javascript:void(0);"></a></div> <div class="mainImg normal_img img_tool" style="background-image: url(@@@image2@@@);background-size: contain;background-repeat: no-repeat;background-position: 50% 50%;"><a href="javascript:void(0);"></a></div> <div class="mainImg normal_img img_tool" style="background-image: url(@@@image3@@@);background-size: contain;background-repeat: no-repeat;background-position: 50% 50%;"><a href="javascript:void(0);"></a></div> <div class="mainImg normal_img img_tool" style="background-image: url(@@@image4@@@);background-size: contain;background-repeat: no-repeat;background-position: 50% 50%;"><a href="javascript:void(0);"></a></div> </div>

試したこと

1枚目のスライドのbackground-imageのurlが空の時に、mainViewを消したいです。
下記のような書き方を試しましたが、コードをどう書いたら良いかわかりません・・。

$('.mainImg1.style.backgroundImage[url=""]').parent('.mainView').hide();

素人質問で恐縮ですが、よろしくお願いします。