CSS Hintergrundbild skalieren

[Andreas B. (andreas_b359)]

Hallo,
ich habe mir bereits eine CSS Slideshow erstellt, bei der das 
Hintergrundbild immer wieder wechselt.
Die Bilder haben die Größe 1920x1080.
Nun möchte ich aber, dass das Hintergrundbild dem Bildschirm angepasst, 
also skaliert wird.
Zudem sollte die Höhe des Bildes nur 600 Pixel entsprechen.

Wie wird dies in CSS gemacht?
Vielen Dank im voraus

[Dirk K. (merciless)]

Google kaputt?

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

merciless

[Daniel A. (daniel-a)]

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)