Erstellen eines Abschnitts, dessen Höhe ist einstellbar auf der Höhe des Hintergrundbildes

Ich habe 3 Abschnitte, dass ihre Eltern ist nur der Körper, Abschnitt 2 (Menü) Hintergrund ist in diesem Fall größer als 100vh. Geben Sie die Höhe: auto; funktioniert nicht, ich möchte die Höhe des Abschnitts entsprechend der Hintergrundlänge (automatisch) strecken, ich möchte nicht einen bestimmten Wert geben mit (px, vh, cm, ... etc). Ich bin mir ziemlich sicher, dass es eine einfache Antwort ist, aber ich konnte es mir selbst nicht erklären. DankeErstellen eines Abschnitts, dessen Höhe ist einstellbar auf der Höhe des Hintergrundbildes

html,body { 
 
\t position: relative; 
 
\t background: white; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
#Home { 
 
\t position: relative; 
 
\t height: 100vh; 
 
\t width: 100vw; 
 
\t background-image: url(/images/Header.jpg); 
 
\t background-size: cover; 
 
\t background-repeat: no-repeat; 
 

 

 
} 
 

 
#Menu { 
 
\t display: block; 
 
\t position: relative; 
 
\t height: auto; 
 
\t width: 100vw; 
 
\t background-image: url(/images/Menu.jpg); 
 
\t background-size: cover; 
 
\t background-repeat: no-repeat; 
 
\t 
 
}

<html> 
 

 
\t <body> 
 
\t \t <section id="Home"></section> 
 
\t \t 
 
\t \t <section id="Menu"></section> 
 
\t \t 
 
\t \t <section id="Map"></section> 
 

 
\t </body> 
 

 
</html>

Quelle

2017-08-31 Mazen Da

Es gibt keine Möglichkeit für ein Element, um die Höhe eines Hintergrundbildes zu kennen. Die einfache Lösung ist die Verwendung eines . –

Danke Kumpel, es hat funktioniert :) –

Die einzige Möglichkeit, dies durch nicht die tatsächliche Hintergrund Eigenschaft erreichen verwenden.

Wie @Mr Lister kommentiert:

Es gibt keine Möglichkeit für ein Element, um die Höhe eines Hintergrund Bild zu kennen.

Sie können jedoch ein Img-Tag mit dem Bild, das Sie möchten, als Hintergrund in Ihrem #menu-Abschnitt verwenden. Erstellen Sie dann ein Container-Div mit absoluter Positionierung, das den Inhalt Ihres aktuellen Abschnitts enthält.

html, 
 
body { 
 
    position: relative; 
 
    background: white; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#Home { 
 
    position: relative; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background-image: url(http://i.imgur.com/8tcxHWh.jpg); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 

 
#Menu { 
 
    display: block; 
 
    position: relative; 
 
    width: 100vw; 
 
} 
 

 
.content { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
h2 { 
 
    color: white; 
 
    font-size: 4em; 
 
}

<section id="Home"></section> 
 

 
<section id="Menu"> 
 
    <img src="http://i.imgur.com/BF3ty6o.jpg"> 
 
    <div class="content"> 
 
    <h2>My content</h2> 
 
    </div> 
 
</section> 
 

 
<section id="Map"></section>

Quelle

2017-08-31 07:47:24

Erstellen eines Abschnitts, dessen Höhe ist einstellbar auf der Höhe des Hintergrundbildes

Antwort

Verwandte Themen