• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV-Größe abhängig von Inhalt

bzwerg

bzwerg

Neues Mitglied
Hallo zusammen,

ich versuche seit längerer Zeit eine DIV-Box per CSS zu gestalten, damit die Höhe abhängig vom Inhalt ist. Ich habe ein Bild in einer Box. Die Box selbst hat eine Background-color: grau mit 0,5 transparenz. Das Bild soll dahinter liegen und wenn ich das Browserfenster vergrößere soll die Box genauso groß sein wie das Bild. Aktuell wächst das Bild, aber nicht die Box. Eine statische Höhe habe ich natürlich nicht verbaut:

<html>
<head>
<style>
.fullscreen-bg__img {
position: absolute;
top: 50%;
left: 50%;
width: auto;
min-width: 100%;
min-height: 580px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: -1;

}
.banner{
background-size: cover;
min-height: 580px;
position: relative;


}
.bg-color{
background-color: RGBA(40, 40, 40, 0.5);
min-height: 580px;
}
</style>


</head>
<body>

<div class="banner">
<div class="bg-color">

<img src="https://www.popoptiq.com/wp-content/uploads/2013/04/oblivion-3-600x316.jpg" class="fullscreen-bg__img">

</div>
</div>

</body>
</html>
 
bzwerg schrieb:
Hallo zusammen,

ich versuche seit längerer Zeit eine DIV-Box per CSS zu gestalten, damit die Höhe abhängig vom Inhalt ist. Ich habe ein Bild in einer Box. Die Box selbst hat eine Background-color: grau mit 0,5 transparenz. Das Bild soll dahinter liegen und wenn ich das Browserfenster vergrößere soll die Box genauso groß sein wie das Bild. Aktuell wächst das Bild, aber nicht die Box. Eine statische Höhe habe ich natürlich nicht verbaut:

<html>
<head>
<style>
.fullscreen-bg__img {
position: absolute;
top: 50%;
left: 50%;
width: auto;
min-width: 100%;
min-height: 580px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: -1;

}
.banner{
background-size: cover;
min-height: 580px;
position: relative;


}
.bg-color{
background-color: RGBA(40, 40, 40, 0.5);
min-height: 580px;
}
</style>


</head>
<body>

<div class="banner">
<div class="bg-color">

<img src="https://www.popoptiq.com/wp-content/uploads/2013/04/oblivion-3-600x316.jpg" class="fullscreen-bg__img">

</div>
</div>

</body>
</html>
Zum Vergrößern anklicken....

https://jsfiddle.net/c9kw4q2p/
 
Das Problem ist die Positionierung des Bildes mit 'position: absolute;'
Dadurch wird das das Bild aus dem 'Textfluss' raus genommen und der Rest der Seite ignoriert seine Anwesenheit.
Füge einfach das Bild in das Div ein - das Div passt sich an den Inhalt an, wenn du es lässt!
Versuche mal dein CSS so anzupassen.

<style>
.fullscreen-bg__img {
position: relative;
width: 100%;
z-index: -1;
}
.banner {
position: relative;
}
.bg-color{
background-color: RGBA(40, 40, 40, 0.5);
}
</style>

Den Rest sollte der Browser für dich machen.
 
scbawik schrieb:
https://jsfiddle.net/c9kw4q2p/
Zum Vergrößern anklicken....

Das hat geholfen, vielen Dank!!!

Hier nochmal die Lösung:

<!DOCTYPE html>
<html>
<head>
<style>
.fullscreen-bg__img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
min-width:100%;
min-height:100%;
}

.banner{
min-height: 580px;
position: relative;
overflow:hidden;
}

.bg-color{
background-color: rgba(40, 40, 40, 0.5);
min-height: 580px;
}
</style>


</head>
<body>

<div class="banner">
<div class="bg-color">

<img src="https://www.popoptiq.com/wp-content/uploads/2013/04/oblivion-3-600x316.jpg" class="fullscreen-bg__img">

</div>
</div>

</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben