Frage von Tiki1407, 94

Html: Hintergrund-bild das sich dynamisch der browsergröße anpasst?

Hallo meine mitmenschen, bin grad am aufbauen einer Html seite, das einzigste was mich nervt ist das Hintergrundbild...habe viele codes ausprobiert aber nichts passt wirklich. Kurz uind knapp. 1. Es soll als Hintergrundbild anerkannt sein (Background) 2. Es soll sich automatisch anpassen,z.b wenn ich das fenster resize, aber so das das Seitenverhältnis bleibt. 3. Falls es zu klein oder groß ist, soll es sich auch selber anpassen. 4. Natürlich soll es den Hintergruind füllen, kann sein das die 4 mit dem Seitenverhältnis probleme bekommt, wenn das so ist sch* ich aufs seitenverhätlnis...danke für die hilfe.

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von frax18, 73

Es gibt viele Wege das zu realisieren. Nutze CSS dafür. Die Zauberwörder für die protortionale Vergrößerung und Verkleinerung lauten:

background-size: contain;

oder

background-size: cover;

oder

background-size: 100%;

Quellen z.B.:

https://css-tricks.com/almanac/properties/b/background-size/

Hier wird auch die Browserunterstützung aufgeführt. Achtung: obiges gilt nur ab dem Internet Explorer 9+

Wenn du für ältere Browser Unterstützung gewährleisten möchtest musst du mit einem Block-Element arbeiten (Div) und folgendes nutzen:

width: 100%;
Kommentar von frax18 ,

Hier noch ein Artikel für die Hintergrundskalierung im IE7+

http://stackoverflow.com/questions/14705025/background-size-100-not-working-in-i...

Kommentar von Tiki1407 ,

Das mit background-size: Contain hat mir schon weitergeholfen, so will ichs haben, nur es sollte dann halt sich stretchen, sonst bekomm ich je nach fenstergröße weiße ränder!

Weißt du dafür was?

Das müsste dann eine mischung aus: Cover und contain sein.  :/

Kommentar von frax18 ,

Musst dann aber damit auch leben, dass dein Bild gestreckt oder gestaucht wird. Dann solltest du das hier versuchen:

background-size: 100% 100%;
Kommentar von Tiki1407 ,

Danke. danke danke danke . Du bist der beste!

Kommentar von frax18 ,

Bitte bitte :)

Antwort
von lolimov, 62

http://m.onblog.at/responsive-webdesign-4-hintergrund-bilder-automatisch-skalier... (dürfte dir helfen, oder?)

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten