Html / Css - Comment obtenir une image pour étirer 100% de la largeur d'un conteneur puis afficher une autre image dessus?

J'ai du mal à obtenir la présentation de l'en-tête j'ai à l'esprit ensemble.

Voici le code 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>

Et le 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;
}

Ce que je suis en train d'accomplir, est l'image "headerBg.jpg" d'affichage à 100% de la largeur de la div "header", donc, essentiellement, il sera la toile de fond de la div. Alors l'image "logo.png" et le " div "loginBox d'affichage" au-dessus "headerBg.jpg".

Le logo doit être transporté jusqu'à l'extrémité gauche et le loginBox flottait à l'extrême droite comme dans le css.

Avec l'image retirée, le logo et la div sont placés correctement, mais lorsque l'image est introduite ils deux flotter les éléments sont placés après l'image dans le flux.

J'ai essayé divers ajouts et des reconfigurations mais aucun n'a prouvé de la manière dont je les veux.

J'ai ajouté l'image dans le css comme arrière-plan de l'en-tête de div, mais il ne s'allonge pas à 100% de cette façon.

Quelqu'un serait-il en mesure de fournir un certain éclairage sur cette?

Aussi tous les tutoriels couvrant des choses comme ce serait un excellent ajout à ma collection!

Merci!

source d'informationauteur Craig van Tonder

<!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>

3
```
.header {
    position: relative;
}

.headerBg {
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
}
```
Noter que cette échelle de l'image pour l'adapter à la largeur de la <div>; si vous ne le souhaitez redimensionner horizontalement, alors vous devriez régler la hauteur de façon explicite.

Vous pouvez également essayer de max-width: 100%; si vous voulez seulement l'image à l'échelle de grandes fenêtres.

Juste l'en-tête de l'image de fond le vrai fond de la div. Flottant ne pas ignorer les autres objets de la façon dont cette position: absolute.

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

0

Définir la div de classe qui ne présentent aucune des pièces supplémentaires.
```
div {
overflow: hidden;
}
```

Ces paramètres travaillé parfait pour moi.. il sera de taille ur photo pour toutes les images..

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

}

-1

essayez d'utiliser dans votre css:
```
max-height:100%;
```

Vous devez vous connecter pour publier un commentaire.