Responsive Background
Unterschied Contain & Cover

Diese responsive Website enthält 1 CSS-Navigationsleiste.

Responsive zentrierte horizontale Navigation. Slick Navi ab 800px und einem anderen Banner ab 734px

Geht mit der Maus in der Navi auch über ‘Themen & Mega Menü’ für ein Maga-Menü inklusive Lytebox

Hier geht es zum Download der Beispieldateien von smartmenus.org zum besseren Verständnis mit etlichen Beispielen
Beispiel vertikale Navigationsleiste
Beispiel responsive Layoutbereiche

Diese Seite hat keinen Layoutbereich für die Responsivität.

Sie wird dagegen nur mit einer Style-Anweisung im <body> responsive, so wie in meiner “Tutorial Seite” beschrieben.

Der Layout von NOF hat hier folgendes DIV erhalten.

Am “Beginn des Haupttextes” <body>

Schließt das DIV am “Ende des Haupttextes” </body> wieder:

</div>

Hier ein Beispiel für ein Hintergrundbild in einem Textfeld mit den Einstellungen

width: 80%;
max-width: 800px;
margin: auto;
background-size: contain;
background-position: center;
background-repeat: no-repeat;

Contain skaliert das Bild (hier 960px breit) so groß wie möglich aber so, dass es vollständig in das Eltern-Element, hier ein Textfeld-Rahmen von 305px Höhe, passt.

Dieser Text steht über dem Bild

Unten als Beispiel für ein Hintergrundbild im gleichen Text-Rahmen wie oben, nur zeige ich hier die volle Breite des Bildes von 960px