Vertikal Header-Bild auf allen Geräten ohne überlappenden Inhalt

Question

ein bisschen wie eine Stute mit etwas, das sollte einfach sein. Grundsätzlich möchte ich ein Element bestehend aus einem Bild und etwas Text unten sowohl vertikal als auch horizontal zentriert sein. Ich brauche das auf allen Geräten als eine Art Begrüßungsbildschirm, vielleicht mit Prozentsätzen?

Unter dem in meinem Code ist das nächste Element, das einige Nav-Tabs sind, aber das Problem mit meinem Code ist derzeit, dass es Überschneidungen des Inhalts verursacht, so dass ein wenig Anleitung suchen. Ich kann keine feste Höhe im Code angeben, da die Ansichtsfenster variieren.

Jede Hilfe mit diesem würde sehr geschätzt werden, danke Jungs.

HTML

<header class="header-content text-center"> 
    <img src="assets/img/sample.png"/> 
    <h1>some text</h1> 
    <h2>here is some more text that I am working on blah</h2> 
    </header> 

    <section class="container"> 
    <ul class="nav nav-tabs nav-justified"> 
     <li data-toggle="tab" class="active"><a href="#home">Test</a></li> 
     <li><a data-toggle="tab" href="#menu1">test1</a></li> 
     <li><a data-toggle="tab" href="#menu2">test2</a></li> 
     <li><a data-toggle="tab" href="#menu3">test3</a></li> 
    </ul> 

    <div class="tab-content"> 
     <div id="home" class="tab-pane fade in active"> 
     <h3>test</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     </div> 
     <div id="menu1" class="tab-pane fade"> 
     <h3>test1</h3> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     </div> 
     <div id="menu2" class="tab-pane fade"> 
     <h3>test2</h3> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
     </div> 
     <div id="menu3" class="tab-pane fade"> 
     <h3>test3</h3> 
     <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
     </div> 
    </div> 
    </section> 

CSS

header.header-content{ 
    color:#fff; 
    margin: auto; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%) 
} 

Answer 1

Sie immer Stützpunkte nutzen könnten. Grundsätzlich funktioniert es wie folgt aus:

@media screen and (max-width: 1000px) { 
    /* Fill with styling rules */ 
} 

@media verwendet wird, verschiedene Regeln für verschiedene Geräte, Rasterweiten zu definieren usw.

screen selbsterklärend ist.

(max-width: 1000px) bedeutet, dass für alle 1000 Pixel und darunter diese Regeln angewendet werden. Eine Alternative ist die Verwendung von min-width, die das Gegenteil tut.