1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

DIV-Größe abhängig von Inhalt

Dieses Thema im Forum "HTML, XHTML & CSS" wurde erstellt von bzwerg, 14 November 2017 um 08:53 Uhr.

  1. bzwerg

    bzwerg Neues Mitglied

    Registriert seit:
    23 Januar 2017
    Beiträge:
    18
    Punkte für Erfolge:
    1
    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>
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. scbawik

    scbawik Senior HTML'ler

    Registriert seit:
    14 Juli 2011
    Beiträge:
    2.371
    Punkte für Erfolge:
    83
    https://jsfiddle.net/c9kw4q2p/
     
    bzwerg gefällt das.
  3. Sailor

    Sailor Mitglied

    Registriert seit:
    14 Juli 2017
    Beiträge:
    48
    Punkte für Erfolge:
    8
    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.
     
  4. bzwerg

    bzwerg Neues Mitglied

    Registriert seit:
    23 Januar 2017
    Beiträge:
    18
    Punkte für Erfolge:
    1
    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>