jahrelang (
) war es ein Problem, im Chatstream ein Hintergrundbild festzulegen, das in jeder Auflösung vernünftig aussieht. Da gabs dann diverse Tipps, vom verwenden einer beliebig wiederholbaren Textur, bis zum erzeugen eines im Hintergrund liegenden img-Tags. Das hat nun, dank CSS3, ein Ende. Wird im IE ab Version 9 unterstützt, IE8/XP kann und sollte einem nun wirklich mal egal sein 
Alle richtigen Browser unterstützen das ganze in aktuellen Versionen. Doch wie funktioniert das ganze nun? Es gibt eine neue CSS-Eigenschaft namens background-size, die die Größe des Hintergrundbilds festlegt. Diese kann auch den Wert cover annehmen, der genau das tut, was sein Name besagt. Dabei wird das Bild skaliert. Da jedoch jedes Bild seine "relevanten" Stellen woanders hat, gibt es außerdem background-position. Das Bild wird quasi um den angegebenen Punkt herum skaliert. Dazu gibt es folgende mögliche Werte: Code: Alles auswählen
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottomRote Stellen sollten natürlich angepasst werden, damit die für euch passen. Das 4K-Bild ist zum testen natürlich ideal gewesen, weil es immer nur verkleinert werden muss. Vergrößerung erzeugt immer matschige Bilder<script type="text/javascript">document.getElementsByTagName("html")[0].style = "height:100%;background-image:url(http://www.4kdesktopwallpapers.com/wp-c ... -Arena.jpg);background-size:cover;background-repeat:no-repeat;background-position:center center;";</script>
Viel Spaß damit
