web-dev-qa-db-fra.com

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 disposition de l'en-tête que j'ai en tête ensemble.

Voici le html jusqu'à présent:

<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 jusqu'à présent:

#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 j'essaie d'accomplir, c'est que l'image "headerBg.jpg" soit affichée à 100% de la largeur du "header" div, donc ce sera essentiellement l'arrière-plan du div lui-même. Ensuite, l'image "logo.png" et la div "loginBox" s'affichent au-dessus de "headerBg.jpg".

Le logo doit flotter à l'extrême gauche et le loginBox flotter à l'extrême droite comme dans le CSS.

Une fois l'image supprimée, le logo et le div sont placés correctement, mais lorsque l'image est introduite, deux éléments flottants sont placés après l'image dans le flux.

J'ai essayé divers ajouts et reconfigurations, mais aucun n'a prouvé qu'il fonctionnait comme je le souhaitais.

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

Quelqu'un pourrait-il donner un aperçu de cela?

De plus, tout tutoriel couvrant des choses comme celle-ci serait un excellent ajout à ma collection!

Je vous remercie!

htmlcssimagestretch
13
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>
10
chadpeppers
.header {
    position: relative;
}

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

Notez que cela mettra l'image à l'échelle pour qu'elle s'adapte à la largeur du <div>; si vous souhaitez uniquement qu'il redimensionne horizontalement, vous devez définir la hauteur explicitement.

Vous pouvez également essayer max-width: 100%; si vous souhaitez uniquement que l'image soit mise à l'échelle sur de grandes fenêtres.

3
Neil

Faites juste l'image d'arrière-plan de l'en-tête le véritable arrière-plan de cette div. Float n'ignore pas les autres objets comme le fait cette position: l'absolu le fait.

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

Définissez la classe div qui n'affichera aucune partie supplémentaire.

div {
overflow: hidden;
}
0
fahomid

Ces paramètres ont fonctionné parfaitement pour moi .. il dimensionnera votre photo pour toutes les photos ..

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

}

0
NICK