CSS Hintergrundbild skalieren

Google kaputt?

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images

merciless

Mit background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size?retiredLocale=de

Man kann das auch alles zusammen gleichzeitig in der "background" Eigenschaft setzen. Und man kann auch mehrere Backgrounds an verschiedenen Positionen usw. haben. Da kann man viel mehr machen, als man zunächst annehmen würde. (z.B. habe ich damit mal Linien gezeichnet: https://bgl-s.s.abrecht.li/ ). Schau dir also alle background-* Eigenschaften mal an.

Hier könnte auch image-set() stat url() interessant sein: https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set Aber der Browsersupport ist noch nicht so toll.

Man könnte statdessen <picture> nehmen. Oder <img srcset="" sizes=""/>. Der Sinn ist überall der gleiche, bei kleineren Bildschirmen kleinere Bilder laden.

Siehe auch noch: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

PS: Ich finde das ganze mit mehreren Bildgrössen ja ziemlich idiotisch. Man hätte ja einfach in den Browsen implementieren können, dass sie von Interlacing/Interleaving[1] bei Bildern gebrauch machen und nur so viel laden, wie sie brauchen. Dann hätte man ebim Zoomen auch einfach noch mehr nachladen können, wenn man es braucht. Aber was solls, vielleicht irgend wann in der Zukunft mal...

1. https://en.wikipedia.org/wiki/Interlacing_(bitmaps)