---
title: <image>
slug: Web/CSS/image
tags:
  - CSS
  - CSS Bilder
  - CSS Datentyp
  - Grafik
  - Layout
  - Referenz
  - Web
translation_of: Web/CSS/image
---
<p>{{CSSRef}}</p>

<h2 id="Übersicht">Übersicht</h2>

<p>Der <code>&lt;image&gt;</code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp repräsentiert ein 2D Bild. Es gibt zwei Arten von Bildern in CSS: einfache statische Bilder, die meist über einen URL referenziert werden, und dynamisch generierte Bilder wie Farbverläufe oder Abbildungen von Teilen der HTML Struktur.</p>

<p>CSS kann verschiedene Arten von Bildern verarbeiten:</p>

<ul>
 <li>Bilder mit <em>inneren Maßen</em>, d. h. einer natürlichen Größe, wie bei einem JPEG Bild, das feste Maße hat.</li>
 <li>Bilder mit <em>mehreren inneren Maßen</em>, die in mehreren Versionen innerhalb der Datei existieren, wie bei einigen ICO Formaten. In diesem Fall entspricht das innere Maß dem flächenmäßig größten Bild mit dem Seitenverhältnis, das dem der beinhaltenden Box am nächsten kommt.</li>
 <li>Bilder ohne innerem Maß, die jedoch ein <em>inneres Seitenverhältnis</em> zwischen ihrer Breite und Höhe haben, wie beispielsweise einige Vektorbilder im SVG Format.</li>
 <li>Bilder ohne <em><a>innere Maße noch innerem Seitenverhältnis</a></em>, wie beispielsweise CSS Farbverläufen.</li>
</ul>

<p>CSS bestimmt die <em>konkrete Objektgröße</em> anhand dieser <em>inneren Maße</em>, der <em>angegebenen Größe </em>definiert durch CSS Eigenschaften wie {{cssxref("width")}}, {{cssxref("height")}} oder {{cssxref("background-size")}} und der <em>Standard Objektgröße</em>, die durch die Art der Eigenschaft definiert wird, in der das Bild verwendet wird:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th>Objektart</th>
   <th>Standard Objektgröße</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{cssxref("background-image")}}</td>
   <td>Die Größe des Hintergrund Positionierungsbereichs des Elements</td>
  </tr>
  <tr>
   <td>{{cssxref("list-style-image")}}</td>
   <td>Die Größe eines Zeichens in <code>1em</code></td>
  </tr>
  <tr>
   <td>{{cssxref("border-image")}}</td>
   <td>Die Größe des Randbildbereichs des Elements</td>
  </tr>
  <tr>
   <td>{{cssxref("cursor")}}</td>
   <td>Eine durch den Browser definierte Größe, die der normalen Größe eines Mauszeigers auf dem benutzten System entspricht</td>
  </tr>
  <tr>
   <td>Ersetzter Inhalt wie die Kombination der CSS Eigenschaft {{cssxref("content")}} mit den CSS Pseudoelementen {{cssxref("::after")}} und {{cssxref("::before")}}</td>
   <td>Ein <code>300px</code><code> × 150px</code> Rechteck</td>
  </tr>
 </tbody>
</table>

<p>Die konkrete Objektgröße wird mit Hilfe des folgenden Algorithmus berechnet:</p>

<ul>
 <li>Falls die angegebene Größe sowohl Breite als auch Höhe definiert, werden diese Werte als die konkrete Objektgröße verwendet.</li>
 <li>Falls die angegebene Größe einen der beiden Werte für Breite und Höhe definiert, wird der fehlende Wert durch das innere Seitenverhältnis bestimmt, sofern vorhanden, die inneren Maße, falls der angegebene Wert passt, oder es wird die Standard Objektgröße für den fehlenden Wert verwendet.</li>
 <li>Falls die angegebene Größe weder Breite noch Höhe definiert, wird die konkrete Objektgröße so berechnet, dass sie dem inneren Seitenverhältnis der Bilder entspricht, jedoch die Standard Objektgröße in keinem Maß übersteigt. Falls das Bild kein inneres Seitenverhältnis hat, wird das innere Seitenverhältnis des Objekts verwendet, dem es zugewiesen ist; falls das Objekt keines hat, wird die fehlende Breite oder Höhe von der Standard Objektgröße herangezogen.</li>
</ul>

<p>Bilder können von diversen CSS Eigenschaften verwendet werden, wie {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} oder {{cssxref("cursor")}}.</p>

<div class="note"><strong>Hinweis:</strong> Nicht alle Browser unterstützen alle Arten von Bildern in allen Eigenschaften. Der Unterpunkt <a href="#Browser_Kompatibilität">Browser Kompatibilität</a> enhält hierzu eine detaillierte Liste.</div>

<h2 id="Syntax">Syntax</h2>

<p>Ein <code>&lt;image&gt;</code> CSS Datentyp kann die folgenden Bilder repräsentieren:</p>

<ul>
 <li>Ein Bild, dass durch einen {{cssxref("&lt;uri&gt;")}} CSS Datentyp und die <code>url()</code> Funktion angegeben wird</li>
 <li>Einen CSS {{cssxref("&lt;gradient&gt;")}};</li>
 <li>Einen Teil einer Seite, der durch die {{cssxref("element", "element()")}} Funktion definiert wird.</li>
</ul>

<h2 id="Beispiele">Beispiele</h2>

<p>Dies sind gültige Bildwerte:</p>

<pre>url(test.jpg)                          Die url() Funktion, sofern test.jpg ein Bild ist
linear-gradient(to bottom, blue, red)  Ein &lt;gradient&gt;
element(#colonne3)                     Ein Teil einer Seite, der durch die element() Funktion referenziert wird,,
                                       sofern 'colonne3' eine existierende CSS ID auf der Seite darstellt.
</pre>

<p>Dies sind ungültige Bildwerte:</p>

<pre>cervin.jpg                             Eine Bilddatei muss durch die url() Funktion angegeben werden.
url(report.pdf)                        Die Datei, die über die url() Funktion angesprochen wird, muss ein Bild sein.
element(#fakeid)                       Falls 'fakeid' keine in der Seite existierende CSS ID darstellt.
</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Images', '#image-notation', 'image()')}}</td>
   <td>{{Spec2('CSS3 Images')}}</td>
   <td>Vor <a href="/en-US/docs/Web/CSS/CSS3">CSS3</a> gab es keinen explizit definierten <code>&lt;image&gt;</code> Datentyp. Bilder konnten nur durch die <code>url()</code> Funktion definiert werden.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

{{Compat("css.types.image")}}

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="/de/docs/Farbverläufe_in_CSS">Farbverläufe in CSS</a>, {{cssxref("&lt;gradient&gt;")}}, {{cssxref("linear-gradient","linear-gradient()")}}, {{cssxref("radial-gradient","radial-gradient()")}}, {{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}};</li>
 <li>{{cssxref("element","element()")}};</li>
</ul>