Hi,
aktuell arbeitet man ja, wenn man mit Bannern arbeitet, mit der vollen breite, was mir ja auch gefällt aber wie nutzt man am besten das Bild, welches CSS nutzt man, dass man das Bild auch am besten sieht und auch möglichst alles?
Wenn ich da z.b. an background-size: cover denke, klappt das auch nicht immer.
Wie erstellt man heut zutage Banner die über die volle breite gehen und nicht genau so hoch wei breit sein müssen?
LG & Danke
Also wenn das Banner/Bild immer in voller Größe zu sehen sein soll, musst du dir erstmal überlegen, welche Seitenverhältnisse das Bild haben soll (z.B. 16:4).
Sobald das feststeht, überlegt man sich, wie das Bild bei verschiedenen Bildschirmweiten und höhen aussehen soll. Ich mache es gerne so:
Da du von einem Banner sprichst, gehe ich davon aus, dass das Bild keine 100vH höhe hat, sondern 100vw weite und eine absolute höhe oder so.
Das ist es eigentlich schon. Das Bild ist immer in voller größe zu sehen und ist responsive zu verschiedenen Bildschrimgrößen
so sieht das dann aus:
[ATTACH=full]4735[/ATTACH]
[ATTACH=full]4736[/ATTACH]
[ATTACH=full]4737[/ATTACH]
Also die Technick hinter diesem Hero Banner finde ich gut:
http://www.cleverbirds.com/
Auch wie sich die Schrift mit dem Banner verhält.
Du meinst, dass die Schrift schneller scrollt und der Hintergrund langsamer mitscrollt?
Sowas nennt sich Parallax-Effekt.
Das weis ich mit dem Paralax.
Ich meine, dass schrift und Hintergrundbild immer an einem ähnlich Platz sind.
Mir geht es darum, dass man einen Banner erstellen kann, wo man auch immer das meiste vom Bild sieht, es bringt ja nix, wenn ich nur die hälfte vom Bild sehe.
So würde ich es machen, gibt es denn noch eine andere Variante?
https://codepen.io/anon/pen/zdZRbZ
Also ein Banner, welches den kompletten Bildschirm ausfüllt. 100vH und 100vw?!
Wenn du die Breite oder höhe des Browserfensters änderst, soll immer das meist-mögliche vom Bild zu sehen sein.
Ist das so richtig?
Ja, ganz genau
Also wenn du das meist-mögliche sehen willst, gibt es natürlich die Möglichkeit dem Bild zu sagen er soll IMMER 100vw und IMMER 100vH groß sein, da dies aber nicht gut aussieht, da sich das Bild natürlich krum zieht, lassen wir diese Variante mal raus.
Variante 2:
[HTML]background: url(„pfad/zum/bild.png“) repeat-x center center[/HTML]
Diese Variante positioniert das Hintergrundbild immer mittig und schiebt es nicht nach rechts, sodass nur noch der Rand des Bildes zu sehen ist.
Ist es sowas was du suchst?