Html/Css -Как заставить изображение растягиваться на 100% ширины контейнера, а затем отображать другое изображение поверх него?

Я борюсь с получением макета заголовка, который я имею в виду вместе.

Вот html на данный момент:

<div id="header">
    <img src="/img/headerBg.jpg" alt="" class="headerBg" />
    <a href="/"><img src="/img/logo.png" alt="Logo" class="logo" /></a>
    <div id="loginBox">
        other code
    </div>
</div>

И css на данный момент:

#header {
    height: 130px;
    margin: 5px 5px 0 5px;
    border: #0f0f12 outset 2px;
    border-radius: 15px;
}

#loginBox {
    float: right;
    width: 23.5%;
    height: 128px;
    font-size: 75%;
}

.headerBg {

}

.logo {
    width: 50%;
    height: 120px;
    float: left;
    display: block;
    padding: 5px;
}

Чего я пытаюсь добиться, так это отображать изображение "headerBg.jpg" на 100% ширины "заголовка" div, так что по существу это будет фон самого div. Затем отобразите изображение «logo.png» и div «loginBox» над «headerBg.jpg».

Логотип должен располагаться в крайнем левом углу, а поле входа в систему — в крайнем правом углу, как в css.

Когда изображение удалено, логотип и div размещаются правильно, но когда изображение вводится, два плавающих элемента помещаются после изображения в потоке.

Я пробовал различные дополнения и реконфигурации, но ни один из них не работал так, как я хочу.

Я добавил изображение в css в качестве фона в блок заголовка, но оно не растягивается на 100%.

Кто-нибудь может дать некоторое представление об этом?

Кроме того, любые уроки, посвященные подобным вещам, были бы отличным дополнением к моей коллекции!

Спасибо!