initial commit

1 files changed, 155 insertions, 0 deletions

diff --git a/files/de/web/css/background-image/index.html b/files/de/web/css/background-image/index.html
new file mode 100644
index 0000000000..2c49b17489
--- /dev/null
+++ b/files/de/web/css/background-image/index.html
@@ -0,0 +1,155 @@
+---
+title: background-image
+slug: Web/CSS/background-image
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/background-image
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>background-image</code>-Eigenschaft legt ein oder mehrere Hintergrundbilder für ein Element fest. Die einzelnen Bilder werden übereinander gestapelt, wobei die erste Schicht so dargestellt wird, dass sie dem Benutzer am nächsten erscheint. Hintergrundbilder werden immer über Hintergrundfarben gelegt.</p>
+
+<p>Um bei ausgeschalteten Grafiken oder Fehlern beim Laden des Bildes einen ausreichenden Kontrast zu gewährleisten, ist es deshalb sinnvoll, immer eine Hintergrundfarbe mittels <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a> anzugeben. Die Kurzform <a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a> bietet sich an, um beides zu notieren.</p>
+
+<div class="note">Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundbilder, durch Kommata getrennt, definiert werden.<br>
+Das zuerst definierte Hintergrundbild ist dabei das Oberste.</div>
+
+<ul>
+ <li>Standardwert: <code>none</code></li>
+ <li>Anwendbar auf: Alle Elemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: absolute URI oder <code>none</code></li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">background-image:  &lt;Hintergrundbild&gt;[, &lt;Hintergrundbild&gt;]*
+
+<strong>&lt;Hintergrundbild&gt;</strong>:
+none | url | inherit | -moz-linear-gradient() | -moz-radial-gradient()
+
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>none</dt>
+ <dd>Standardwert. Es wird kein Hintergrundbild verwendet.</dd>
+ <dt>url</dt>
+ <dd>Der Pfad des Bildes, das als Hintergrund angezeigt werden soll.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h4 id="Mozilla_Erweiterungen">Mozilla Erweiterungen:</h4>
+
+<dl>
+ <dt><a href="/de/CSS/-moz-linear-gradient" title="de/CSS/-moz-linear-gradient"><code>-moz-linear-gradient()</code></a> {{ gecko_minversion_inline("1.9.2") }}</dt>
+ <dd>Linearer Verlauf</dd>
+ <dt><a href="/de/CSS/-moz-radial-gradient" title="de/CSS/-moz-radial-gradient"><code>-moz-radial-gradient()</code></a> {{ gecko_minversion_inline("1.9.2") }}</dt>
+ <dd>Radialer Verlauf</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Es ist zu beachten, dass das Bild des Sterns teilweise transparent ist und das Katzenbild überlagert. </p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+    &lt;p class="catsandstars"&gt;
+        This paragraph is full of cats&lt;br /&gt;and stars.
+    &lt;/p&gt;
+    &lt;p&gt;This paragraph is not.&lt;/p&gt;
+    &lt;p class="catsandstars"&gt;
+        Here are more cats for you.&lt;br /&gt;Look at them!
+    &lt;/p&gt;
+    &lt;p&gt;And no more.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">pre, p {
+    font-size: 1.5em;
+    color: #FE7F88;
+    background-color: transparent;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+p {
+  background-image: none;
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample('Beispiele')}}</p>
+
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+   <th>mehrere Hintergrundbilder</th>
+   <th>Verläufe</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td>3.6 (1.9.2)</td>
+   <td>3.6 (1.9.2) [-moz-]</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+   <td>10.5</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td>1.3 (312)</td>
+   <td>4.0 (528) [<a class="external" href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/Functions.html#//apple_ref/doc/uid/TP40007955-SW25">-webkit-</a>]</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#background-image" lang="en">CSS 3 Background and Borders #background-image</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image" lang="en">CSS 2.1 Colors and Backgrounds #background-image</a></li>
+ <li><a class="external" href="http://dev.w3.org/csswg/css3-images/#gradients-" lang="en">CSS 3 Images #gradients</a> (Editor's Draft)</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a>, <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a>, <a href="/de/CSS/background-clip" title="de/CSS/background-clip"><code>background-clip</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/background-origin" title="de/CSS/background-origin"><code>background-origin</code></a>, <a href="/de/CSS/background-position" title="de/CSS/background-position"><code>background-position</code></a>, <a href="/de/CSS/background-repeat" title="de/CSS/background-repeat"><code>background-repeat</code></a>, <a href="/de/CSS/background-size" title="de/CSS/background-size"><code>background-size</code></a></li>
+ <li><a href="/de/CSS/-moz-background-inline-policy" title="de/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li>
+ <li><a href="/de/CSS/-moz-linear-gradient" title="de/CSS/-moz-linear-gradient"><code>-moz-linear-gradient</code></a>, <a href="/de/CSS/-moz-radial-gradient" title="de/CSS/-moz-radial-gradient"><code>-moz-radial-gradient</code></a>, <a href="/de/CSS/-moz-repeating-linear-gradient" title="de/CSS/-moz-repeating-linear-gradient"><code>-moz-repeating-linear-gradient</code></a>, <a href="/de/CSS/-moz-repeating-radial-gradient" title="de/CSS/-moz-repeating-radial-gradient"><code>-moz-repeating-radial-gradient</code></a></li>
+</ul>
+
+<p>{{ languages( {"en": "en/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image", "es": "es/CSS/background-image" } ) }}</p>