{"id":123734,"date":"2025-03-03T08:19:01","date_gmt":"2025-03-03T06:19:01","guid":{"rendered":"https:\/\/elementor.com\/blog\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/"},"modified":"2025-12-17T11:03:15","modified_gmt":"2025-12-17T09:03:15","slug":"css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/","title":{"rendered":"CSS-Eigenschaft background-image: Wie f\u00fcgt man ein CSS-Hintergrundbild ein?"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In diesem umfassenden Leitfaden werden wir in die Welt der CSS-Hintergrundbilder eintauchen und alles von den Grundlagen bis hin zu fortgeschrittenen Techniken erkunden. Unabh\u00e4ngig davon, ob Sie ein erfahrener Webentwickler sind oder gerade erst beginnen, werden Sie entdecken, wie man:<\/span><\/p>\n

    \n
  1. Die richtigen Bildformate ausw\u00e4hlt<\/span><\/li>\n
  2. Die Kachelung und Wiederholung von Bildern steuert<\/span><\/li>\n
  3. Pr\u00e4zise Positionierung meistert<\/span><\/li>\n
  4. Fixierte und Parallax-Effekte erzeugt<\/span><\/li>\n
  5. Mehrere Bilder \u00fcbereinander legt<\/span><\/li>\n
  6. Farbverl\u00e4ufe f\u00fcr dynamische Hintergr\u00fcnde einsetzt<\/span><\/li>\n
  7. Bilder f\u00fcr blitzschnelle Ladezeiten optimiert<\/span><\/li>\n<\/ol>\n

    Wenn Sie bereit sind, Ihre Website-Designs auf ein h\u00f6heres Niveau zu heben, lassen Sie uns beginnen!<\/span><\/p>\n

    Die Grundlagen von CSS-Hintergrundbildern <\/span><\/h2>\n

    Beginnen wir damit, die Kernkonzepte und Eigenschaften zu verstehen, die steuern, wie Hintergrundbilder angezeigt werden.<\/span><\/p>\n

    Die <\/span>background-image<\/span> Eigenschaft<\/span><\/h3>\n

    Das Herzst\u00fcck der CSS-Hintergrundbildimplementierung ist die <\/span>background-image<\/span> Eigenschaft. Hier teilen Sie dem Browser mit, welche Bilddatei als Hintergrund verwendet werden soll. Hier ist die grundlegende Syntax:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\tCSS\r\nselector {\r\n  background-image: url('path\/to\/your\/image.jpg'); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-635589b elementor-widget elementor-widget-text-editor\" data-id=\"635589b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Selektor<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Dies ist das HTML-Element, in dem das Hintergrundbild erscheinen soll (z.B. <\/span><span style=\"font-weight: 400;\">body<\/span><span style=\"font-weight: 400;\">, ein spezifisches <\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> etc.).<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">url()<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Diese Funktion spezifiziert den Speicherort des Bildes. Der Pfad kann sein:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Relativ:<\/b><span style=\"font-weight: 400;\"> Relativ zum Speicherort Ihrer CSS-Datei.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Absolut:<\/b><span style=\"font-weight: 400;\"> Eine vollst\u00e4ndige Webadresse, einschlie\u00dflich des Protokolls (http:\/\/ oder https:\/\/).<\/span><\/li>\n<\/ul>\n<p><b>Beispiel:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a3562e4 elementor-widget elementor-widget-code-highlight\" data-id=\"a3562e4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n  background-image: url('\/images\/background.png'); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44d855e elementor-widget elementor-widget-text-editor\" data-id=\"44d855e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Wichtiger Hinweis:<\/b><span style=\"font-weight: 400;\"> Schlie\u00dfen Sie Ihre Bild-URL stets in einfache oder doppelte Anf\u00fchrungszeichen ein, um eine korrekte Interpretation durch den Browser zu gew\u00e4hrleisten.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Dateiformate<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Webbrowser support eine Reihe von Bildformaten, aber die gebr\u00e4uchlichsten f\u00fcr Hintergr\u00fcnde sind:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>JPEG (oder JPG): <\/b><span style=\"font-weight: 400;\">ist am besten f\u00fcr Fotografien oder Bilder mit komplexen Farben und Farbverl\u00e4ufen geeignet. Es bietet eine gute Komprimierung.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>PNG:<\/b><span style=\"font-weight: 400;\"> Hervorragend f\u00fcr Bilder mit Transparenz oder wenn eine verlustfreie Komprimierung ben\u00f6tigt wird (Logos, Grafiken).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>GIF:<\/b><span style=\"font-weight: 400;\"> Wird f\u00fcr einfache Animationen verwendet, ist aber im Allgemeinen weniger geeignet f\u00fcr gro\u00dfe Hintergrundbilder.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>SVG:<\/b><span style=\"font-weight: 400;\"> Skalierbare Vektorgrafiken sind ideal f\u00fcr Symbole, Illustrationen oder Muster, da sie unendlich skalierbar sind, ohne an Qualit\u00e4t zu verlieren.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>WebP: <\/b><span style=\"font-weight: 400;\">ist ein modernes Format, das sowohl verlustbehaftete als auch verlustfreie Komprimierung bietet. Es ist oft JPEG und PNG in Bezug auf die Dateigr\u00f6\u00dfe \u00fcberlegen, hat jedoch eine geringere universelle Browser-support.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">background-repeat<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Die <\/span><span style=\"font-weight: 400;\">background-repeat<\/span><span style=\"font-weight: 400;\">  Eigenschaft bestimmt, wie ein Hintergrundbild innerhalb seines Containerelementes gekachelt oder wiederholt wird. Hier sind die m\u00f6glichen Werte:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>repeat<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Das Bild wird sowohl horizontal als auch vertikal wiederholt (Standardverhalten).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>repeat-x<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Das Bild wird nur horizontal wiederholt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>repeat-y<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Das Bild wird nur vertikal wiederholt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>no-repeat<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Das Bild wird einmal ohne Wiederholung angezeigt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>space<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Das Bild wird wiederholt, und jeglicher zus\u00e4tzlicher Raum wird gleichm\u00e4\u00dfig zwischen den Bildern verteilt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>round<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Das Bild wird so oft wie n\u00f6tig wiederholt, um den Raum zu f\u00fcllen, wobei die Bilder entweder gestaucht oder gestreckt werden, um partielle Kacheln zu vermeiden.<\/span><\/li>\n<\/ul>\n<p><b>Beispiel:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d8a127 elementor-widget elementor-widget-code-highlight\" data-id=\"3d8a127\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: url('pattern.png');\r\n    background-repeat: repeat-y; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a5ca2ae elementor-widget elementor-widget-text-editor\" data-id=\"a5ca2ae\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Beherrschung der Hintergrundbildgr\u00f6\u00dfen\u00e4nderung <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Die <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> Eigenschaft<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Die <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\">  Eigenschaft steuert, wie ein Hintergrundbild skaliert wird, um in seinen Container zu passen. Hier sind die gebr\u00e4uchlichsten Werte:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>cover<\/b><b>:<\/b><span style=\"font-weight: 400;\">  Das Bild wird so skaliert, dass es den gesamten Container bedeckt, wobei sein Seitenverh\u00e4ltnis beibehalten wird. Teile des Bildes k\u00f6nnen beschnitten werden, um eine vollst\u00e4ndige Anpassung zu gew\u00e4hrleisten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>contain<\/b><b>:<\/b><span style=\"font-weight: 400;\">  Das Bild wird skaliert, um vollst\u00e4ndig in den Container zu passen, wobei sein Seitenverh\u00e4ltnis beibehalten wird. Dies kann zu Leerr\u00e4umen um das Bild f\u00fchren, wenn das Seitenverh\u00e4ltnis des Containers abweicht.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>length<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Sie k\u00f6nnen eine explizite Breite und H\u00f6he angeben (z.B. <\/span><span style=\"font-weight: 400;\">background-size: 200px 150px;<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>percentage<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Dimensioniert das Bild relativ zur Breite oder H\u00f6he seines Containers (z.B. <\/span><span style=\"font-weight: 400;\">background-size: 50% auto;<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<\/ul>\n<p><b>Beispiel:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4984a1d elementor-widget elementor-widget-code-highlight\" data-id=\"4984a1d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n    background-image: url('landscape. jpg');\r\n    background-size: cover; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-505d24b elementor-widget elementor-widget-text-editor\" data-id=\"505d24b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Responsive Hintergrundbilder<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Im modernen Webdesign ist Responsivit\u00e4t von essentieller Bedeutung. Hier erfahren Sie, wie Sie sicherstellen k\u00f6nnen, dass Hintergrundbilder sich gut an verschiedene Bildschirmgr\u00f6\u00dfen anpassen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Flexible Einheiten:<\/b><span style=\"font-weight: 400;\"> Verwenden Sie <\/span><span style=\"font-weight: 400;\">percentage<\/span><span style=\"font-weight: 400;\"> oder Viewport-Einheiten (<\/span><span style=\"font-weight: 400;\">vw<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">vh<\/span><span style=\"font-weight: 400;\">) innerhalb der <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> Eigenschaft, um dem Bild eine fl\u00fcssige Skalierung zu erm\u00f6glichen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Media Queries:<\/b><span style=\"font-weight: 400;\"> Setzen Sie CSS-Media-Queries ein, um verschiedene <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> Werte (oder sogar unterschiedliche Hintergrundbilder) basierend auf der Bildschirmgr\u00f6\u00dfe oder Ger\u00e4teausrichtung anzuwenden.<\/span><\/li>\n<\/ul>\n<p><b>Beispiel (Media Query):<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab0edb8 elementor-widget elementor-widget-code-highlight\" data-id=\"ab0edb8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n@media (max-width: 768px) {\r\n    body {\r\n        background-image: url('landscape-mobile.jpg'); \r\n        background-size: contain; \r\n    }\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ab6941 elementor-widget elementor-widget-text-editor\" data-id=\"4ab6941\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Pr\u00e4zise Positionierung von Hintergrundbildern<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Die <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\"> Eigenschaft<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Die <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\">  Eigenschaft gew\u00e4hrt Ihnen detaillierte Kontrolle dar\u00fcber, wo ein Hintergrundbild innerhalb seines Containers platziert wird. Sie akzeptiert Werte in verschiedenen Formaten:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Schl\u00fcsselw\u00f6rter<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">top<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">bottom<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">left<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">right<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">center<\/span><span style=\"font-weight: 400;\"> (positioniert das Bild relativ zu den R\u00e4ndern)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Kombinationen sind zul\u00e4ssig (z.B. <\/span><span style=\"font-weight: 400;\">top right<\/span><span style=\"font-weight: 400;\">)<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">L\u00e4ngen<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Pixelwerte (z.B. <\/span><span style=\"font-weight: 400;\">background-position: 20px 10px;<\/span><span style=\"font-weight: 400;\">) oder Viewport-Einheiten f\u00fcr <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"How To Create A Responsive Website: Step-By-Step 2025 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"29809\">responsive<\/a> Positionierung.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Prozentangaben<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Positionieren Sie das Bild als Prozentsatz relativ zur Breite und H\u00f6he des Containers (z.B. <\/span><span style=\"font-weight: 400;\">background-position: 30% 75%;<\/span><span style=\"font-weight: 400;\">)<\/span><\/p>\n<p><b>Beispiel:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a814e1e elementor-widget elementor-widget-code-highlight\" data-id=\"a814e1e\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: url('texture.png');\r\n    background-position: center bottom; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f42eb0d elementor-widget elementor-widget-text-editor\" data-id=\"f42eb0d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Kombination von Positionen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Sie k\u00f6nnen Schl\u00fcsselw\u00f6rter, Prozentangaben und Pixelwerte in der <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\"> Eigenschaft kombinieren, um eine komplexe und pr\u00e4zise Bildplatzierung innerhalb Ihres Designs zu erstellen.<\/span><\/p>\n<p><b>Beispiel:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf161b9 elementor-widget elementor-widget-code-highlight\" data-id=\"bf161b9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: url('icon.png');\r\n    background-repeat: no-repeat;\r\n    background-position: right 20px bottom 10px; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e536de elementor-widget elementor-widget-text-editor\" data-id=\"0e536de\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Dies w\u00fcrde ein Symbol 20 Pixel vom rechten Rand und 10 Pixel vom unteren Rand des Container-Elements platzieren.<\/span><\/p>\n<p><b>Wichtig:<\/b><span style=\"font-weight: 400;\"> Bei Verwendung von zwei Werten repr\u00e4sentiert der erste Wert die horizontale Position und der zweite Wert die vertikale Position.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Fixierte vs. Scrollende Hintergr\u00fcnde <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Die <\/span><span style=\"font-weight: 400;\">background-attachment<\/span><span style=\"font-weight: 400;\"> Eigenschaft<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Die <\/span><span style=\"font-weight: 400;\">background-attachment<\/span><span style=\"font-weight: 400;\">  Eigenschaft steuert, wie sich ein Hintergrundbild verh\u00e4lt, wenn der Benutzer die Seite scrollt. Hier sind die Hauptwerte:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>scroll<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Das Hintergrundbild scrollt zusammen mit dem Inhalt des Elements (dies ist das Standardverhalten).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>fixed<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Das Hintergrundbild bleibt in seiner Position relativ zum Viewport fixiert und erzeugt die Illusion, dass es an Ort und Stelle bleibt, w\u00e4hrend der Inhalt dar\u00fcber scrollt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>local<\/b><span style=\"font-weight: 400;\"> Das Hintergrundbild scrollt zusammen mit dem Inhalt des Elements selbst, selbst wenn dieses Element einen eigenen Scrollmechanismus hat.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Der Parallax-Effekt<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Parallax-Scrolling ist eine beliebte Technik, bei der sich Hintergrundbilder langsamer bewegen als der Vordergrundinhalt, was eine Illusion von Tiefe erzeugt. Dies wird durch die Verwendung von background-attachment: fixed erreicht, zusammen mit JavaScript, um die Position des Hintergrundbildes basierend auf dem Scrollfortschritt anzupassen.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Design\u00fcberlegungen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Bei der Entscheidung zwischen fixierten und scrollenden Hintergr\u00fcnden sollten Sie folgende Faktoren ber\u00fccksichtigen:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Visuelle Wirkung:<\/b><span style=\"font-weight: 400;\"> Fixierte Hintergr\u00fcnde k\u00f6nnen einen dramatischen oder immersiven Effekt erzeugen und werden oft in Hero-Sektionen verwendet.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lesbarkeit:<\/b><span style=\"font-weight: 400;\"> Stellen Sie sicher, dass jeglicher Text, der \u00fcber einem fixierten Hintergrund platziert ist, ausreichend Kontrast aufweist, um lesbar zu bleiben.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Leistung:<\/b><span style=\"font-weight: 400;\">  Fixierte Hintergr\u00fcnde, insbesondere solche, die f\u00fcr Parallax-Effekte verwendet werden, k\u00f6nnen einen geringf\u00fcgigen Einfluss auf die Performance haben. Setzen Sie sie strategisch ein.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Benutzererfahrung:<\/b><span style=\"font-weight: 400;\"> Vermeiden Sie die \u00fcberm\u00e4\u00dfige Verwendung von fixierten Hintergr\u00fcnden oder zu komplexen Parallaxeffekten, da diese auf einigen Ger\u00e4ten die Benutzer ablenken oder desorientieren k\u00f6nnen.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Fortgeschrittene Techniken f\u00fcr Hintergrundbilder<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Mehrere Hintergrundbilder<\/span><\/h3>\n<p><span style=\"font-weight: 400;\"><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"20245\">CSS<\/a> erm\u00f6glicht es Ihnen, mehrere Hintergrundbilder auf einem einzelnen Element zu schichten, wodurch reichhaltige visuelle Effekte mit Tiefe und Komplexit\u00e4t entstehen. So erreichen Sie dies:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Durch Kommata getrennte <\/b><b>background-image<\/b><b> Werte:<\/b><span style=\"font-weight: 400;\"> Listen Sie mehrere <\/span><span style=\"font-weight: 400;\"><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/url\/\"   title=\"What is a URL? Structure, Syntax &#038; Best Practices\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"20246\">url<\/a>()<\/span><span style=\"font-weight: 400;\"> Werte innerhalb der <\/span><span style=\"font-weight: 400;\">background-image<\/span><span style=\"font-weight: 400;\"> Eigenschaft auf, getrennt durch Kommata.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Schichtungsreihenfolge:<\/b><span style=\"font-weight: 400;\"> Das erste Bild in der Liste ist die unterste Schicht; nachfolgende Bilder werden dar\u00fcber gestapelt.<\/span><\/li>\n<\/ol>\n<p><b>Beispiel:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb24e81 elementor-widget elementor-widget-code-highlight\" data-id=\"bb24e81\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: url('gradient.png'), url('texture.jpg'), url('logo.svg');\r\n    background-repeat: no-repeat, repeat, no-repeat;\r\n    background-position: center, 0 0, right bottom; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-303b04b elementor-widget elementor-widget-text-editor\" data-id=\"303b04b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Wichtig:<\/b><span style=\"font-weight: 400;\"> Sie k\u00f6nnen die <\/span><span style=\"font-weight: 400;\">background-repeat, background-position<\/span><span style=\"font-weight: 400;\"> und andere Eigenschaften f\u00fcr jedes Hintergrundbild individuell steuern, indem Sie ebenfalls durch Kommata getrennte Listen f\u00fcr diese Eigenschaften angeben.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Lineare Farbverl\u00e4ufe<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Farbverl\u00e4ufe sind flie\u00dfende \u00dcberg\u00e4nge zwischen zwei oder mehr Farben. Das  <\/span><span style=\"font-weight: 400;\">linear-gradient()<\/span><span style=\"font-weight: 400;\"> Funktion erm\u00f6glicht es Ihnen, lineare Farbverl\u00e4ufe f\u00fcr dynamische Hintergrundeffekte zu erstellen.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Grundlegende Syntax<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">CSS<\/span><\/p>\n<p><span style=\"font-weight: 400;\">background-image: linear-gradient(Richtung, Farbverlauf1, Farbverlauf2, &#8230;); <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Richtung<\/b><b>:<\/b><span style=\"font-weight: 400;\">  Dies legt den Winkel des Farbverlaufs fest. Es kann mit Schl\u00fcsselw\u00f6rtern ausgedr\u00fcckt werden (<\/span><span style=\"font-weight: 400;\">to top<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">to bottom right<\/span><span style=\"font-weight: 400;\">) oder numerischen Graden (z.B. <\/span><span style=\"font-weight: 400;\">45deg<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>color-stop<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Eine Farbe und ihre Position entlang der Farbverlaufslinie (z.B. <\/span><span style=\"font-weight: 400;\">blue 0%<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">red 50%<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">green 100%<\/span><span style=\"font-weight: 400;\">)<\/span><\/li>\n<\/ul>\n<p><b>Beispiel:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2297ef elementor-widget elementor-widget-code-highlight\" data-id=\"e2297ef\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n   background-image: linear-gradient(to right, #f00 0%, #00f 100%); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-19bfbcd elementor-widget elementor-widget-text-editor\" data-id=\"19bfbcd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Radiale Farbverl\u00e4ufe<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Radiale Farbverl\u00e4ufe erzeugen einen Farb\u00fcbergang, der von einem zentralen Punkt nach au\u00dfen strahlt. So verwenden Sie die  <\/span><span style=\"font-weight: 400;\">radial-gradient()<\/span><span style=\"font-weight: 400;\"> Funktion in CSS:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Grundlegende Syntax<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a31c77 elementor-widget elementor-widget-code-highlight\" data-id=\"4a31c77\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbackground-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f57d39d elementor-widget elementor-widget-text-editor\" data-id=\"f57d39d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Form<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Definiert die Form des Farbverlaufs. Kann sein:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">ellipse<\/span><span style=\"font-weight: 400;\"> (Standard)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Kreis<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Gr\u00f6\u00dfe<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Bestimmt die Ausdehnung des Farbverlaufs. Optionen beinhalten:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">n\u00e4chstgelegene Seite<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">am weitesten entfernte Seite<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">n\u00e4chstgelegene Ecke<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">am weitesten entfernte Ecke<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Explizite L\u00e4ngen oder Prozentangaben.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Position<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Legt den Mittelpunkt des Farbverlaufs fest. Verwendet eine \u00e4hnliche Syntax wie  <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Farbstopp<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Gleich wie bei linearen Farbverl\u00e4ufen.<\/span><\/p>\n<p><b>Beispiel:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c26c518 elementor-widget elementor-widget-code-highlight\" data-id=\"c26c518\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: radial-gradient(circle at center, #ff0000 0%, #0000ff 60%, #000 100%); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9838c5 elementor-widget elementor-widget-text-editor\" data-id=\"a9838c5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Tipps<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Radiale Farbverl\u00e4ufe k\u00f6nnen von verschiedenen Positionen innerhalb des Containers beginnen, nicht nur von der Mitte. Experimentieren Sie mit dem  <\/span><span style=\"font-weight: 400;\">position<\/span><span style=\"font-weight: 400;\"> Wert f\u00fcr interessante Effekte.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u00c4hnlich wie ihre linearen Gegenst\u00fccke k\u00f6nnen radiale Farbverl\u00e4ufe Ihren Hintergrundbildern ein Gef\u00fchl von Tiefe oder visuellem Fokus verleihen.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Transparenz mit RGBA und Opacity<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Lassen Sie uns betrachten, wie Sie Transparenz steuern und halbtransparente Hintergrundeffekte erstellen k\u00f6nnen:<\/span><\/p>\n<p><b>RGBA-Farben:<\/b><span style=\"font-weight: 400;\">  RGBA erweitert das RGB-Farbmodell durch Hinzuf\u00fcgen eines Alpha-Kanals (A), der die Deckkraft steuert. Die Werte reichen von 0 (vollst\u00e4ndig transparent) bis 1 (vollst\u00e4ndig deckend).<\/span><\/p>\n<p><b>Beispiel:<\/b><b><br \/><\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ae6538 elementor-widget elementor-widget-code-highlight\" data-id=\"2ae6538\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-color: rgba(255, 0, 0, 0.5); \/* Half-transparent red *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3884453 elementor-widget elementor-widget-text-editor\" data-id=\"3884453\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Opacity-Eigenschaft:<\/b><span style=\"font-weight: 400;\">  Diese Eigenschaft wendet Transparenz auf ein gesamtes Element an, einschlie\u00dflich seines Hintergrundbildes. Die Werte reichen von 0 bis 1.<\/span><\/p>\n<p><b>Beispiel:<\/b><b><br \/><\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-528c20f elementor-widget elementor-widget-code-highlight\" data-id=\"528c20f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp> CSS\r\nimg {\r\n    opacity: 0.8; \/* Makes the image 80% opaque *\/\r\n} \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27d1faf elementor-widget elementor-widget-text-editor\" data-id=\"27d1faf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Optimierung von Hintergrundbildern f\u00fcr die Leistung  <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Bildkomprimierung<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Das Komprimieren von Bildern reduziert ihre Dateigr\u00f6\u00dfe, ohne \u00fcberm\u00e4\u00dfig an Qualit\u00e4t einzub\u00fc\u00dfen. Es ist ein Balanceakt, und hier sind einige Tools und Ans\u00e4tze, die Sie in Betracht ziehen sollten:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Bildoptimierungswerkzeuge<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Online-Dienste:<\/b><span style=\"font-weight: 400;\"> TinyPNG, Squoosh, Kraken.io und viele andere bieten Online-Tools an.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Software:<\/b><span style=\"font-weight: 400;\"> Photoshop, GIMP oder dedizierte Bildoptimierungssoftware wie ImageOptim.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Elementor Image Optimizer:<\/b><span style=\"font-weight: 400;\"> Falls Sie Elementor erw\u00e4hnen m\u00f6chten, stellen Sie kurz dessen eingebautes Bildoptimierungstool f\u00fcr einen optimierten Arbeitsablauf vor.<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Verlustbehaftete vs. Verlustfreie Kompression<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Verlustbehaftet:<\/b><span style=\"font-weight: 400;\"> Dies reduziert die Dateigr\u00f6\u00dfe signifikanter, indem permanent einige Bilddaten verworfen werden (geeignet f\u00fcr Fotos; mit Bedacht einsetzen).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Verlustfrei:<\/b><span style=\"font-weight: 400;\"> Optimiert die Dateigr\u00f6\u00dfe ohne jeglichen Qualit\u00e4tsverlust (ideal f\u00fcr Grafiken und Logos).<\/span><\/li>\n<\/ul>\n<p><b>Den optimalen Punkt finden:<\/b><span style=\"font-weight: 400;\"> Experimentieren Sie mit verschiedenen Kompressionsgraden, um den besten Kompromiss zwischen Dateigr\u00f6\u00dfe und visueller Qualit\u00e4t f\u00fcr Ihre Hintergrundbilder zu finden.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Vorladung<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Das Vorladen signalisiert dem Browser, dass Hintergrundbilder wichtig sind und fr\u00fchzeitig im Seitenladeprozess abgerufen werden sollten. Hier ist die Implementierung mittels des HTML- <\/span><span style=\"font-weight: 400;\"><cx id=\"gid_1\"><\/cx>link<cx id=\"gid_2\"><\/cx><\/span><span style=\"font-weight: 400;\">-Tags:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fc6a78 elementor-widget elementor-widget-code-highlight\" data-id=\"6fc6a78\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<link rel=\"preload\" as=\"image\" href=\"hero-image.jpg\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4650e89 elementor-widget elementor-widget-text-editor\" data-id=\"4650e89\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><b>Optimieren Sie Hintergrundbilder f\u00fcr schnellere Ladezeiten<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">W\u00e4hrend Hintergrundbilder die visuelle Attraktivit\u00e4t Ihres Designs erheblich steigern k\u00f6nnen, k\u00f6nnen sie auch die Seitenladegeschwindigkeit beeintr\u00e4chtigen, wenn sie nicht optimiert sind. Durch die Verwendung eines  <\/span><a href=\"https:\/\/elementor.com\/products\/image-optimizer\"><span style=\"font-weight: 400;\">Bildoptimierer<\/span><\/a><span style=\"font-weight: 400;\">  Plugins k\u00f6nnen Sie Hintergrundbilder komprimieren, um ihre Dateigr\u00f6\u00dfe zu reduzieren, ohne die Qualit\u00e4t zu beeintr\u00e4chtigen. Dieser schnelle Schritt stellt sicher, dass Ihre Seite schneller l\u00e4dt, was die Benutzererfahrung verbessert und der Suchmaschinenoptimierung zugutekommt. Um beste Ergebnisse zu erzielen, streben Sie stets danach, optimierte Bilder in Kombination mit effizientem CSS zu verwenden, um das perfekte Gleichgewicht zwischen \u00c4sthetik und Leistung zu erreichen.<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07e810a elementor-widget elementor-widget-text-editor\" data-id=\"07e810a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Hintergrundbilder und Webdesign-Trends <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Aktuelle Trends<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Das Webdesign entwickelt sich st\u00e4ndig weiter, und die Verwendung von Hintergrundbildern spiegelt nat\u00fcrlich diese Ver\u00e4nderungen wider. Hier sind einige bemerkenswerte Trends:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Markante Hero-Bilder:<\/b><span style=\"font-weight: 400;\"> Gro\u00dfe, hochqualitative Hintergrundbilder in Hero-Bereichen sind ein fester Bestandteil. Sie bestimmen die Stimmung der Website und fesseln die Aufmerksamkeit der Besucher.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Texturen und Farbverl\u00e4ufe: <\/b><span style=\"font-weight: 400;\">Diese f\u00fcgen Tiefe und Interesse hinzu, ohne das Gesamtdesign zu \u00fcberw\u00e4ltigen. Farbverl\u00e4ufe bieten sanfte Farb\u00fcberg\u00e4nge, w\u00e4hrend Texturen eine taktile Qualit\u00e4t einbringen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Illustrationen als Hintergr\u00fcnde:<\/b><span style=\"font-weight: 400;\"> Ma\u00dfgefertigte Illustrationen verleihen Pers\u00f6nlichkeit und Einzigartigkeit, insbesondere in Kombination mit k\u00fchner Typografie.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>\u00dcberlagerungen mit Farbe und Transparenz:<\/b><span style=\"font-weight: 400;\"> Die Platzierung einer farbigen \u00dcberlagerung mit Transparenz \u00fcber einem Hintergrundbild kann beeindruckende visuelle Effekte erzeugen und die Lesbarkeit des Textes verbessern.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Asymmetrische Layouts:<\/b><span style=\"font-weight: 400;\"> Hintergrundbilder sind wirkungsvolle Instrumente zur Betonung von Asymmetrie in Designs, wodurch eine dynamischere und unerwartete Komposition entsteht.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Animation und Interaktion:<\/b><span style=\"font-weight: 400;\"> CSS-Animationen oder Hover-Effekte auf Hintergrundbildern f\u00fcgen ein Element des Engagements und der Verspieltheit hinzu.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Barrierefreiheit<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Bedenken Sie, dass Design-Trends nicht auf Kosten der Barrierefreiheit gehen sollten! Hier sind wichtige Punkte, die Sie beachten sollten:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Kontrast:<\/b><span style=\"font-weight: 400;\"> Stellen Sie stets einen ausreichenden Farbkontrast zwischen jeglichem Text, der \u00fcber Ihr Hintergrundbild gelegt wird, und dem Bild selbst sicher.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Alternative Informationen:<\/b><span style=\"font-weight: 400;\"> F\u00fcr Hintergrundbilder, die wichtige Inhalte vermitteln, bieten Sie textbasierte Alternativen an oder verwenden Sie ARIA-Attribute, um Beschreibungen f\u00fcr Screenreader bereitzustellen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Komplexe Hintergr\u00fcnde:<\/b><span style=\"font-weight: 400;\"> Komplexe Bilder k\u00f6nnen f\u00fcr einige Benutzer ablenkend sein. Im Zweifelsfall entscheiden Sie sich f\u00fcr einen einfacheren Hintergrund, um die Lesbarkeit zu priorisieren.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Lassen Sie uns das tun! Hier sind einige weitere Techniken zur Verbesserung Ihrer Hintergrundbildgestaltung.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Jenseits der Grundlagen <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Hintergrund-Mischmodi<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS-Hintergrund-Mischmodi bestimmen, wie ein Hintergrundbild mit den bestehenden Farben oder Inhalten dahinter interagiert. Dies er\u00f6ffnet eine ganze Reihe kreativer M\u00f6glichkeiten. Einige der g\u00e4ngigsten Mischmodi umfassen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>multiply<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Verdunkelt das Ergebnis durch Multiplikation der Hintergrund- und Vordergrundfarben.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>screen<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Hellt das Ergebnis auf durch Invertieren, Multiplizieren und erneutes Invertieren.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>overlay<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Kombiniert multiply und screen f\u00fcr einen Kontrasteffekt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>color-dodge<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Hellt den Hintergrund basierend auf der Vordergrundfarbe auf.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>color-burn<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Verdunkelt den Hintergrund basierend auf der Vordergrundfarbe.<\/span><\/li>\n<\/ul>\n<p><b>Beispiel:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fe95c6 elementor-widget elementor-widget-code-highlight\" data-id=\"6fe95c6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: url('image.jpg');\r\n    background-blend-mode: multiply; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de314b7 elementor-widget elementor-widget-text-editor\" data-id=\"de314b7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Tipps<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Experimentieren Sie mit verschiedenen Mischmodi, um einzigartige visuelle Effekte zu erzielen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mischmodi funktionieren am besten, wenn das Hintergrundbild Bereiche mit Transparenz aufweist.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Achten Sie auf die Lesbarkeit jeglichen Textes, der \u00fcber Bildern mit angewandten Mischmodi platziert wird.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Hintergrundbilder mit CSS-Animationen und \u00dcberg\u00e4ngen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Das Hinzuf\u00fcgen von CSS-Animationen oder \u00dcberg\u00e4ngen erm\u00f6glicht es Ihnen, dynamische Hintergrundbilder zu erstellen, die sich im Laufe der Zeit ver\u00e4ndern. Hier sind einige Ideen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Hover-Effekte:<\/b><span style=\"font-weight: 400;\"> \u00c4ndern Sie die <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\"> oder wenden Sie Filter an, wenn der Mauszeiger \u00fcber ein Element mit einem Hintergrundbild f\u00e4hrt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ken-Burns-Effekt:<\/b><span style=\"font-weight: 400;\"> Simulieren Sie den in Dokumentarfilmen \u00fcblichen Schwenk- und Zoomeffekt, indem Sie langsam <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> und <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\"> \u00e4ndern.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Animierte Farbverl\u00e4ufe:<\/b><span style=\"font-weight: 400;\"> Durchlaufen Sie Farbstopps in einem Farbverlauf mithilfe von CSS-Animationen f\u00fcr einen faszinierenden \u00dcbergangseffekt.<\/span><\/li>\n<\/ul>\n<p><b>Hinweis:<\/b><span style=\"font-weight: 400;\"> Verwenden Sie Animationen mit Bedacht! \u00dcberm\u00e4\u00dfig ablenkende Animationen k\u00f6nnen die Benutzererfahrung negativ beeinflussen.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Hintergrundbilder als Sprites<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Traditionell kombiniert ein Bildsprite mehrere kleinere Bilder in einer einzigen Datei, was die Leistung durch Reduzierung von HTTP-Anfragen verbessert. Diese Technik kann auch auf Hintergrundbilder angewendet werden! So funktioniert es:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Bilder kombinieren:<\/b><span style=\"font-weight: 400;\"> Erstellen Sie ein Sprite-Sheet, das alle Ihre kleinen Hintergrundbilder (z.B. Icons) enth\u00e4lt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Verwenden Sie background-position:<\/b><span style=\"font-weight: 400;\"> Positionieren Sie jedes Symbol pr\u00e4zise innerhalb des Container-Elements mithilfe von <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ol>\n<p><b>Wann sollte man dies verwenden:<\/b><span style=\"font-weight: 400;\"> Es ist hilfreich bei der Arbeit mit mehreren kleinen Symbolen, die h\u00e4ufig auf Ihrer Website verwendet werden.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Fazit<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Hintergrundbilder k\u00f6nnen, wenn sie durchdacht eingesetzt werden, das Erscheinungsbild, das Gef\u00fchl und die gesamte Benutzererfahrung einer Website transformieren. Durch das Verst\u00e4ndnis der grundlegenden CSS-Eigenschaften, die Erforschung fortgeschrittener Techniken und die Priorisierung der Optimierung k\u00f6nnen Sie beeindruckende Visuals erstellen, die die Leistung nicht beeintr\u00e4chtigen.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Denken Sie an diese wichtigen Erkenntnisse:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">W\u00e4hlen Sie basierend auf Ihrem Bildinhalt die richtigen Bildformate (JPEG, PNG, GIF, SVG, WebP).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Steuern Sie die Bildwiederholung, -gr\u00f6\u00dfe und -positionierung mit Pr\u00e4zision.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Experimentieren Sie mit festen versus scrollenden Hintergr\u00fcnden f\u00fcr einzigartige Designeffekte.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Schichten Sie Bilder, verwenden Sie Farbverl\u00e4ufe und steuern Sie die Transparenz f\u00fcr kreative Tiefe.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Optimieren, vorladen und m\u00f6glicherweise tr\u00e4ge laden Sie Bilder, um blitzschnelle Ladezeiten zu gew\u00e4hrleisten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Bleiben Sie \u00fcber aktuelle Webdesign-Trends und Richtlinien zur Barrierefreiheit informiert.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Tools wie Elementor k\u00f6nnen die Verwaltung von Hintergrundbildern erheblich vereinfachen und es Ihnen erm\u00f6glichen, sich auf Ihre Designvision zu konzentrieren, w\u00e4hrend Leistungsoptimierungen im Hintergrund gehandhabt werden.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ob Sie ein erfahrener Webentwickler sind oder gerade erst anfangen, Hintergrundbilder sind ein essentielles Werkzeug in Ihrem Webdesign-Toolkit. Scheuen Sie sich nicht, zu experimentieren und die Grenzen des M\u00f6glichen zu erweitern!<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hintergrundbilder besitzen die F\u00e4higkeit, das Erscheinungsbild und die Atmosph\u00e4re jeder Website zu transformieren. Von Texturen bis hin zu markanten Heldenbildern f\u00fcgen sie visuelle Tiefe hinzu, setzen den Ton und lenken den Blick des Nutzers \u00fcber die Seite. CSS (Cascading Style Sheets) bietet eine F\u00fclle von Werkzeugen zur Anpassung von Hintergrundbildern und gew\u00e4hrt Ihnen eine au\u00dferordentliche Kontrolle \u00fcber deren Erscheinungsbild und Verhalten.<\/p>\n","protected":false},"author":2024234,"featured_media":116825,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[513],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-123734","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressourcen"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS-Eigenschaft background-image: Wie f\u00fcgt man ein CSS-Hintergrundbild ein?<\/title>\n<meta name=\"description\" content=\"Hintergrundbilder besitzen die F\u00e4higkeit, das Erscheinungsbild und die Atmosph\u00e4re jeder Website zu transformieren. Von Texturen bis hin zu markanten Heldenbildern f\u00fcgen sie visuelle Tiefe hinzu, setzen den Ton und lenken den Blick des Nutzers \u00fcber die Seite. CSS (Cascading Style Sheets) bietet eine F\u00fclle von Werkzeugen zur Anpassung von Hintergrundbildern und gew\u00e4hrt Ihnen eine au\u00dferordentliche Kontrolle \u00fcber deren Erscheinungsbild und Verhalten.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS-Eigenschaft background-image: Wie f\u00fcgt man ein CSS-Hintergrundbild ein?\" \/>\n<meta property=\"og:description\" content=\"Hintergrundbilder besitzen die F\u00e4higkeit, das Erscheinungsbild und die Atmosph\u00e4re jeder Website zu transformieren. Von Texturen bis hin zu markanten Heldenbildern f\u00fcgen sie visuelle Tiefe hinzu, setzen den Ton und lenken den Blick des Nutzers \u00fcber die Seite. CSS (Cascading Style Sheets) bietet eine F\u00fclle von Werkzeugen zur Anpassung von Hintergrundbildern und gew\u00e4hrt Ihnen eine au\u00dferordentliche Kontrolle \u00fcber deren Erscheinungsbild und Verhalten.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-03T06:19:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-17T09:03:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"13\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"CSS-Eigenschaft background-image: Wie f\u00fcgt man ein CSS-Hintergrundbild ein?\",\"datePublished\":\"2025-03-03T06:19:01+00:00\",\"dateModified\":\"2025-12-17T09:03:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/\"},\"wordCount\":2513,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Ressourcen\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/\",\"url\":\"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/\",\"name\":\"CSS-Eigenschaft background-image: Wie f\u00fcgt man ein CSS-Hintergrundbild ein?\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-03-03T06:19:01+00:00\",\"dateModified\":\"2025-12-17T09:03:15+00:00\",\"description\":\"Hintergrundbilder besitzen die F\u00e4higkeit, das Erscheinungsbild und die Atmosph\u00e4re jeder Website zu transformieren. Von Texturen bis hin zu markanten Heldenbildern f\u00fcgen sie visuelle Tiefe hinzu, setzen den Ton und lenken den Blick des Nutzers \u00fcber die Seite. CSS (Cascading Style Sheets) bietet eine F\u00fclle von Werkzeugen zur Anpassung von Hintergrundbildern und gew\u00e4hrt Ihnen eine au\u00dferordentliche Kontrolle \u00fcber deren Erscheinungsbild und Verhalten.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ressourcen\",\"item\":\"https:\/\/elementor.com\/blog\/de\/category\/ressourcen\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS-Eigenschaft background-image: Wie f\u00fcgt man ein CSS-Hintergrundbild ein?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/de\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/de\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS-Eigenschaft background-image: Wie f\u00fcgt man ein CSS-Hintergrundbild ein?","description":"Hintergrundbilder besitzen die F\u00e4higkeit, das Erscheinungsbild und die Atmosph\u00e4re jeder Website zu transformieren. Von Texturen bis hin zu markanten Heldenbildern f\u00fcgen sie visuelle Tiefe hinzu, setzen den Ton und lenken den Blick des Nutzers \u00fcber die Seite. CSS (Cascading Style Sheets) bietet eine F\u00fclle von Werkzeugen zur Anpassung von Hintergrundbildern und gew\u00e4hrt Ihnen eine au\u00dferordentliche Kontrolle \u00fcber deren Erscheinungsbild und Verhalten.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/","og_locale":"de_DE","og_type":"article","og_title":"CSS-Eigenschaft background-image: Wie f\u00fcgt man ein CSS-Hintergrundbild ein?","og_description":"Hintergrundbilder besitzen die F\u00e4higkeit, das Erscheinungsbild und die Atmosph\u00e4re jeder Website zu transformieren. Von Texturen bis hin zu markanten Heldenbildern f\u00fcgen sie visuelle Tiefe hinzu, setzen den Ton und lenken den Blick des Nutzers \u00fcber die Seite. CSS (Cascading Style Sheets) bietet eine F\u00fclle von Werkzeugen zur Anpassung von Hintergrundbildern und gew\u00e4hrt Ihnen eine au\u00dferordentliche Kontrolle \u00fcber deren Erscheinungsbild und Verhalten.","og_url":"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T06:19:01+00:00","article_modified_time":"2025-12-17T09:03:15+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Verfasst von":"Itamar Haim","Gesch\u00e4tzte Lesezeit":"13\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"CSS-Eigenschaft background-image: Wie f\u00fcgt man ein CSS-Hintergrundbild ein?","datePublished":"2025-03-03T06:19:01+00:00","dateModified":"2025-12-17T09:03:15+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/"},"wordCount":2513,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/de\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Ressourcen"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/","url":"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/","name":"CSS-Eigenschaft background-image: Wie f\u00fcgt man ein CSS-Hintergrundbild ein?","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-03-03T06:19:01+00:00","dateModified":"2025-12-17T09:03:15+00:00","description":"Hintergrundbilder besitzen die F\u00e4higkeit, das Erscheinungsbild und die Atmosph\u00e4re jeder Website zu transformieren. Von Texturen bis hin zu markanten Heldenbildern f\u00fcgen sie visuelle Tiefe hinzu, setzen den Ton und lenken den Blick des Nutzers \u00fcber die Seite. CSS (Cascading Style Sheets) bietet eine F\u00fclle von Werkzeugen zur Anpassung von Hintergrundbildern und gew\u00e4hrt Ihnen eine au\u00dferordentliche Kontrolle \u00fcber deren Erscheinungsbild und Verhalten.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/de\/css-eigenschaft-background-image-wie-fuegt-man-ein-css-hintergrundbild-ein\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/de\/"},{"@type":"ListItem","position":2,"name":"Ressourcen","item":"https:\/\/elementor.com\/blog\/de\/category\/ressourcen\/"},{"@type":"ListItem","position":3,"name":"CSS-Eigenschaft background-image: Wie f\u00fcgt man ein CSS-Hintergrundbild ein?"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/de\/#website","url":"https:\/\/elementor.com\/blog\/de\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/de\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/de\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/123734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/comments?post=123734"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/123734\/revisions"}],"predecessor-version":[{"id":147875,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/123734\/revisions\/147875"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/media\/116825"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/media?parent=123734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/categories?post=123734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/tags?post=123734"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/marketing_persona?post=123734"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/marketing_intent?post=123734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}