CSS Wordpress, Template, Hintergrundbild, verschiedene Bildschirmgrößen

[auch-da]

Hello!

ich hatte mich entschlossen auf Wordpress umzuziehen, nachdem ich die Inhalte aktualisiert habe, wollte ich dem Design etwas an den Kragen rücken.

Es geht um das Hintergrundbild, sobald das Fenster verkleinert wird, "zoomt" das Bild (wird größer bzw. kleiner). Sobald ich zoome wird der Content kleiner, das Bild bleibt aber so. Da ich aber gerne die "Schiffe" zwischen der Topnav und der Headernav haben möchte, und das Bild sollte auch von oben 50px Abstand haben, die Topnav verdeckt das Bild. Auf Smartphones und Tablets sollte das Hintergrund ausgeblendet werden. Ich würde mich über eure Antworten freuen. Da meine Kenntnisse nicht die besten sind.

Edit: Funktioniert das mit verschiedenen großen Hintergrundbildern?



Mit freundlichen Grüßen
auchda

 

[Daaron]

Es geht um das Hintergrundbild, sobald das Fenster verkleinert wird, "zoomt" das Bild (wird größer bzw. kleiner).

Tatsächlich zoomt es "falsch", es versaubeutelt seine Aspect Ratio. Nimm "background-size:cover;" statt "background-size: 100% 100%;"

Da ich aber gerne die "Schiffe" zwischen der Topnav und der Headernav haben möchte, und das Bild sollte auch von oben 50px Abstand haben, die Topnav verdeckt das Bild.

background-position: 50% 50px;
Ändert aber nichts daran, dass die Schiffe skalieren (und mit "cover" sogar sauber) und somit nicht zwingend zwischen Top und Header passen.
Wenn du nicht weißt, wie groß der Viewport des Users ist, dann weißt du nicht wie groß das Bild ist. Dementsprechend weißt du nicht, ob die Schiffe zwischen deine Navi passen oder nicht. Einzige Lösung: Bei solchen Details auf Skalierung und Flexibilität verzichten.... oder einfach auf solche Details verzichten.

Auf Smartphones und Tablets sollte das Hintergrund ausgeblendet werden.

Es gibt kein "Smartphone" oder "Tablet". Es gibt nur Viewport-Größen. Ein Tablet wie n Nexus 7 hat problemlos ne FullHD-Auflösung, ein kleines Notebook dafür nur HD Ready. Und dann kommt da noch die Spielerei mit der Ausrichtung,....

Man lässt die Media Queries anhand des User-Viewports entscheiden, was dargestellt wird (und wie).

Edit: Funktioniert das mit verschiedenen großen Hintergrundbildern?

Kleinere Bilder pixeln beim Skalieren stärker auf, große Bilder verschlingen unnötig viel Bandbreite... als ob "aufpixeln" bei Minecraft ein Problem wäre... Du verbrätst bei dem Bild 700kByte und ich bin mir sicher, dass es ohne offensichtliche Verluste in 250k möglich wäre.

 

[auch-da]

Du hast mir gerade so halb meinen Tag gerettet. Ich wusste gar nicht das es Cover gibt, habe zwar gefühlte Ewigkeiten gegooglet aber nichts dergleichen gefunden und das mit Background-position, Hau Kopf gegen Wand.

Kann ich dann aber nicht sagen, bei der x-Größe soll das Bild nicht angezeigt werden sondern nur Farbe? Könnte ich dann nicht auch sagen, bei einer Größe von mind. 1280 x 1024 ist der Abstand x-Groß. Bei anderen Größen dann anders? Genau dann ist mein N7 kaputt wo ich es am meisten bräuchte. :/

Ist nur ein Testbild, aber danke für den Hinweis, hatte ich garnicht mehr dran gedacht.


Mit freundlichen Grüßen
auchda

 

[Daaron]

Es gibt sogar nicht nur "cover" sondern auch "contain". Bei Cover wird der Hintergrund gestreckt, bis er das gesamte Element füllt, dafür fallen Teile des Hintergrundes halt an den Seiten oder oben/unten weg. Bei Contain wird der Hintergrund in das Element eingepasst, dafür ist er dann eben oftmals kleiner als das Element. Für dich ist Cover richtig, aber für contain fallen mir auch Szenarien ein...

Und ja, du kannst sagen "ab Auflösung X, stelle anders dar". Genau das sind Media Queries. http://mediaqueri.es/ <- einfach mal durchblättern und aus den Fallbeispielen lernen.
Es ist aber klüger, nicht mit px zu arbeiten sondern möglichst mit em. Löst ein paar kleine Probleme beim Browser Zoom. Muss man aber nicht, außerdem muss man da von Anfang an alles auf em trimmen, ist nachträglich eher zäh umzusetzen.

 

[auch-da]

Jetzt wird der Abstand zwischen Topnav und Headernav ab einer Breite von 1900px größer.

Vielen Dank nochmal

Jetzt muss ich nur noch schauen das ich das Bild wieder schärfer bekommen, durch die Spiegelung ist es sehr unscharf geworden.

Mit freundlichen Grüßen
auchda