background-image: url(image-url);
der browser füllt unsere box mit image, ohne dabei auf das image selbst zu achten. wir haben Optionen um dieses anzupassen.
die wichtigsten sind:
background-size:contain stellt sicher, das das gesamte orginal Bild in der Box angezeigt wird. Ist das Orginalbild größer, wird es so angepasst das es proportional in die Box passt. Dabei kann jedoch Freiraum in der Box bleiben.
background-size:cover Bedeckt die gesamte Box mit Bild. Es zeigt dabei jedoch nicht zwingend das gesamte orginal Bild mehr an - Das Bild wird proportional vergrößert bzw. verkleinert in unserer Box dargestellt. Mit background-position left, center, right, bottom, und topkönnen wir angeben, welcher Teil des Bildes angezeigt werden soll. Die default position ist top``left
mehr Lesematerial
👉mdn bg-image
👉CSS-tricks bg-image
👉fastweb bg-image
👉html-img vs css-bg-image
👉flexible Hintergründe mit background-size gestalten
Youtube Tutorial
👉controlling bg-images (engl.)
👉bg-images for beginners (engl.)