Frage zum Wiki-Artikel Responsive Bilder / resolution switching

[Matthias Scharwies]

Guten Morgen Curtis,

Wie man so etwas als Hintergrund-Bild realisieren kann - hmpf. Keine Ahnung... so gut ist mein css auch wieder nicht.

Dafür hast Du in deinem Stylesheet aber ganz schön viel drin! 😀

Ich habe mal eine Testseite nur mit dem Header gebaut: Responsiver Header

Dein HTML ist ok:

<header>
    <img src="https://www.futuremania.de/img/logoneu1.png" width="1100" height="110" alt="FUTUREMANIA" itemprop="image">
    <p><a href="index1.htm" title="zurück zur Startseite">FUTUREMANIA - The Captain Future Site</a></p>
</header>

Ich habe Dein CSS aufgeräumt:

So ist font-weight:normalbereits in deiner font: normal 1em/125% …- Angabe drin, kann also weg.

Die Schriftgröße ist gut - ich würde sie später nicht kleiner machen, sondern anderes (H1) noch größer.

Im Header brauchst du keine schwarze Schriftfarbe und schwarzen Schatten, das ist ja alles schon für den body deklariert.

(So etwas siehst du, wenn du in den Seiteninspektor schaust.)

Jetzt zu Deinem Bild:

<img src="logoneu1.png" width="1100" height="110" alt="FUTUREMANIA">

Die width-Angabe ist gut, um den Platz freizuhalten, das Bild muss auf schmalen Bildschirmen aber eben kleiner dargestellt werden. Das gilt für alle Bilder:

img {
	max-width: 100%;
	height: auto;
}

Unten siehst du eine Variante mit Hintergrundbild - da passen die Abstände (noch) nicht.

Das dazugehörige CSS sieht nicht viel anders aus als dein Verlauf für den oberen Header:

#background-image {
	background: 
		url("https://www.futuremania.de/img/logoneu1.png") no-repeat 90% center, 
		linear-gradient(to bottom, #132842 30%, #3c4f66 100%);
		padding: 0;
	background-size: 100%;	
}

Banner oder Logo?

Das Bild doppelt ja deinen Titel - ich würde versuchen einen freien Font für "Futuremania" zu bekommen und das als Text darzustellen, dann müsstest du nur das rechte F im Sechseck positionieren.

resolution switching

So etwas brauchst du, wenn du qualitativ hochwertige Fotos darstellen willst, die je nach Viewport auch andere Bildaussschnitte zeigen (Art Direction). Nicht um ein Banner an den Viewport anzupassen

Das Template ist von Engin Yildiz - der war früher auch mal hier aktiv. Hast Du Kontakt mit ihm?

Herzliche Grüße

Matthias Scharwies