CSS Hintergrundbild skalieren

OP #7382530

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

Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Langsamer Modus Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Melden Danke

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)
Antwort Zitieren Bearbeiten Löschen Melden Danke
Thread beobachten

Antwort schreiben

Eine eigene Frage? Dieser Thread ist über 3 Jahre alt. Stell sie in einem eigenen Thread – dort lesen mehr Leute mit, und sie wird öfter und schneller beantwortet.

Neuen Thread starten

Eine Lösung, Ergänzung oder Rückmeldung zu diesem Thread? Dann antworte hier.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Dein Name und deine E-Mail-Adresse

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.