1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
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: <Hintergrundbild>[, <Hintergrundbild>]*
<strong><Hintergrundbild></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"><div>
<p class="catsandstars">
This paragraph is full of cats<br />and stars.
</p>
<p>This paragraph is not.</p>
<p class="catsandstars">
Here are more cats for you.<br />Look at them!
</p>
<p>And no more.</p>
</div></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>
|
