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".

Логотип должен быть перемещен в крайнем левом конце, а loginBox перемещается в крайнее правое, как в css.

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

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

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

Может ли кто-нибудь объяснить это?

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

Спасибо!

Ответ 1

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Render this</title>
    <style type="text/css">
#header {
    position:relative;
    height: 130px;
    margin: 5px 5px 0 5px;
    border: #0f0f12 outset 2px;
    border-radius: 15px;
}

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

}

.headerBg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.logo {
    position:relative;
    width: 50%;
    height: 120px;
    float: left;
    display: block;
    padding: 5px;
}
    </style>
</head>
<body>
<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>

</body>
</html>

Ответ 2

.header {
    position: relative;
}

.headerBg {
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
}

Обратите внимание, что это масштабирует изображение в соответствии с шириной <div>; если вы хотите, чтобы он изменялся по горизонтали, вы должны явно установить высоту.

Вы также можете попробовать max-width: 100%;, если хотите, чтобы изображение масштабировалось на больших окнах.

Ответ 3

Просто сделайте фоновое изображение заголовка истинным фоном этого div. Float не игнорирует другие объекты таким образом, что позиция: абсолютная.

#header {
    height: 130px;
    margin: 5px 5px 0 5px;
    border: #0f0f12 outset 2px;
    border-radius: 15px;
    background: url(headerBg.jpg);
}

Ответ 4

Задайте класс div, который не будет показывать никаких дополнительных частей.

div {
overflow: hidden;
}

Ответ 5

Эти настройки работали идеально для меня.. это будет размер ur фото для всех фото.

#headerBg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;

}

Ответ 6

попробуйте использовать в своем css:

max-height:100%;