css - 添付のスクリーンショットに示すように、下の固定画像

Question

下のスクリーンショットに示すように、一部のコンテンツ (ロゴと中央の説明テキスト) の後に (上ではなく) 表示される下部固定画像を配置したいと思います。この画像は、画面の幅に収まる必要があります。

これら2つの間違った解決策を思いつきました。まず、CSS の background-sizeプロパティを使用します。

// CSS
.bg {
    width: 600px;
    height: 300px;
    position: fixed;
    bottom: 0;
    left: 0%;
    background: url('image.jpg') no-repeat center fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

// HTML part
<div class="bg"></div>

次に、Javascript を少し使用して、ウィンドウのサイズ変更を認識し、イメージ タグにいくつかの CSS プロパティを設定します。

// JS
        // some magick here...
        if ((win_w / win_h) < ($bg.width() / $bg.height())) {
          $bg.css({height: '100%', width: 'auto'});
        } else {
          $bg.css({width: '100%', height: 'auto'});
        }

// HTML Part (I'm using a shim)
<img class="bg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" style="position: relative; left: 0; bottom: 0" />

これらのソリューションは機能しますが、画像がロゴと説明を覆っている (または背景になっている) ことは望ましくありません。手伝って頂けますか？