Okay.
Ich persönlich glaube nicht, dass du den Header auf flex umgebaut bekommst. Ich würde einfach das background image neu positionieren:
Oder wenn du es nur für bestimmte Screens positionieren möchtest:
Code@media only screen and (max-width: 600px) { .header_bild { background-position: center top; } }
Die 600px stehen für die Screenbreite, ab der du das Headerbild anders platzieren möchtest.
Statt "center" könntest du auch einen gewünschten Prozentwert eingeben, negativ oder positiv, bspw. 20%, um den gewünschten Ausschnitt noch besser zu steuern.
Ich habe den Code eben ausprobiert. Er funktioniert.
Auch auf dem Handy sieht es super aus.
Dankeschön dafür.
Flexbox ist eine CSS-Technik, die es dir ermöglicht, Elemente flexibel anzuordnen und auszurichten, unabhängig von ihrer Größe oder Anzahl. Mit Flexbox kannst du zum Beispiel Spalten, Raster oder Navigationen erstellen, die sich automatisch an verschiedene Bildschirmgrößen anpassen.
Media Queries sind eine andere CSS-Technik, die es dir ermöglicht, verschiedene Stile für verschiedene Geräte oder Bildschirmbreiten zu definieren. Mit Media Queries kannst du zum Beispiel das Layout, die Schriftgröße oder die Farbe deiner Webseite je nach Gerätetyp oder Bildschirmauflösung ändern
CSS Flexbox Responsive
Media Queries für Einsteiger
Responsive Design: CSS Flexbox und Media Queries
Ich kenne persönlich nur Media Queries .. :oops:
Bzw von Flexbox habe ich schon gehört, aber noch nie benutzt.:eek: