Versionen vergleichen

background-image

Versionsänderungen

Version 104997:

Version 104997 von Michael2402 am

Version 104998:

Version 104998 von fscholz am

Titel:
background-image
background-image
Adressname:
CSS/background-image
CSS/background-image
Schlagwörter:
css, "CSS Referenz"
css, "CSS Referenz"
Inhalt:

Version 104997
Version 104998
nn7    <h3>
8      Übersicht:
9    </h3>
n8      <br>n11      Die <code>background-image</code> Eigenschaft legt ein Hint
 >ergrundbild fest. Hintergrundbilder werden immer über Hintergrund
 >farben gelegt. Es ist daher sinnvoll immer eine Hintergrundfarbe 
 >mittels <a href="/de/CSS/background-color"><code>background-color
 ></code></a> anzugeben, um bei ausgeschalteten Grafiken oder Fehle
 >rn beim Laden des Bildes einen ausreichenden Kontrast zu gewährle
 >isten. Die Kurzform <a href="/de/CSS/background"><code>background
 ></code></a> bietet sich daher an, um beides zu notieren.
n10    <div class="breadcrumbs">n13    <div class="note">
11      <table width="100%">14      Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundbild
 >er, durch Kommata getrennt, definiert werden.<br>
12        <tbody>15      Das zuerst definierte Hintergrundbild ist dabei das Oberste
 >.
13          <tr>
14            <td style="width:33%;text-align:left">
15              ← <a href="de/CSS/background-color">background-colo
>r</a> 
16            </td>
17            <td style="width:33%;text-align:center">
18              ↑ <a href="de/CSS/background">background</a> ↑
19            </td>
20            <td style="width:33%;text-align:right">
21              <a href="de/CSS/background-position">background-pos
>ition</a> → 
22            </td>
23          </tr>
24        </tbody>
25      </table>
n27    <h3 name=".C3.9Cbersicht">n17    <ul>
28      Übersicht18      <li>Standardwert: <code>none</code>
19      </li>
20      <li>Anwendbar auf: Alle Elemente
21      </li>
22      <li>Vererbbar: Nein
23      </li>
24      <li>Prozentwerte: Nein
25      </li>
26      <li>Medium: visuell
27      </li>
28      <li>Werte: <code>none</code> | <a href="/de/CSS/url_Funktio
 >n"><code>url</code></a> | <code>inherit</code> | <a href="/de/CSS
 >/-moz-linear-gradient"><code>-moz-linear-gradient</code></a> <spa
 >n style="border: 1px solid rgb(129, 129, 81); padding: 2px; backg
 >round-color: rgb(255, 255, 225); font-size: x-small; white-space:
 > nowrap;">Ab Gecko 1.9.2</span> | <a href="/de/CSS/-moz-radial-gr
 >adient"><code>-moz-radial-gradient</code></a> <span style="border
 >: 1px solid rgb(129, 129, 81); padding: 2px; background-color: rg
 >b(255, 255, 225); font-size: x-small; white-space: nowrap;">Ab Ge
 >cko 1.9.2</span>
29      </li>
30    </ul>
31    <h3>
32      Syntax
33    </h3>
34    <pre class="eval">
35background-image:  &lt;Hintergrundbild&gt;[, &lt;Hintergrundbild&
 >gt;]*
36 
37<strong>&lt;Hintergrundbild&gt;</strong>:
38none | url | inherit | -moz-linear-gradient() | -moz-radial-gradi
 >ent()
39 
40</pre>
41    <h3>
42      Werte
43    </h3>
44    <dl>
45      <dt>
46        none
47      </dt>
48      <dd>
49        Standardwert. Es wird kein Hintergrundbild verwendet.
50      </dd>
51      <dt>
52        url
53      </dt>
54      <dd>
55        Der Pfad des Bildes, das als Hintergrund angezeigt werden
 > soll.
56      </dd>
57      <dt>
58        inherit
59      </dt>
60      <dd>
61        Der Wert des Elternelements wird geerbt.
62      </dd>
63    </dl>
64    <h4>
65      Mozilla Erweiterungen:
66    </h4>
67    <dl>
68      <dt>
69        <a href="/de/CSS/-moz-linear-gradient"><code>-moz-linear-
 >gradient()</code></a> <span style="border: 1px solid rgb(129, 129
 >, 81); padding: 2px; background-color: rgb(255, 255, 225); font-s
 >ize: x-small; white-space: nowrap;">Ab Gecko 1.9.2</span>
70      </dt>
71      <dd>
72        Linearer Verlauf
73      </dd>
74      <dt>
75        <a href="/de/CSS/-moz-radial-gradient"><code>-moz-radial-
 >gradient()</code></a> <span style="border: 1px solid rgb(129, 129
 >, 81); padding: 2px; background-color: rgb(255, 255, 225); font-s
 >ize: x-small; white-space: nowrap;">Ab Gecko 1.9.2</span>
76      </dt>
77      <dd>
78        Radialer Verlauf
79      </dd>
80    </dl>
81    <h3>
82      Beispiele
n31      Die Eigenschaft <b>background-image</b> gibt den Pfad des Hn85      <a class=" external" href="http://developer.mozilla.org/sam
>intergrundbildes an>ples/cssref/background-image.html" rel="external nofollow" target
 >="_blank" title="http://developer.mozilla.org/samples/cssref/back
 >ground-image.html">Live Beispiel</a>
n33    <dl>n87    <h4>
34      <dt>88      Einzelnes Hintergrundbild
35        Standardwert
36      </dt>
37      <dd>
38        none
39      </dd>
40      <dt>
41        Anwendbar auf
42      </dt>
43      <dd>
44        Alle Elemente
45      </dd>
46      <dt>
47        Geerbt
48      </dt>
49      <dd>
50        Nein
51      </dd>
52      <dt>
53        Medium
54      </dt>
55      <dd>
56        visual
57      </dd>
58      <dt>
59        Werte
60      </dt>
61      <dd>
62        &lt;url&gt;, none, inherit
63      </dd>
64    </dl>
65    <h3 name="Syntax">
66      Syntax
67    </h3>89    </h4>
n69background-image: &lt;uri&gt; | none | inheritn91background-image: url(img.jpg);
nn93    <h4>
94      Mehrere Hintergrundbilder <span style="border: 1px solid rg
 >b(129, 129, 81); padding: 2px; background-color: rgb(255, 255, 22
 >5); font-size: x-small; white-space: nowrap;">Ab Gecko 1.9.2</spa
 >n>
95    </h4>
71    <p>96    <pre>
72      <br>97background-image: url(img1.jpg), url(img2.jpg);
73    </p>98</pre>
74    <h3 name="Werte">
75      Werte
76    </h3>99    <h3>
77    <dl>100      Browser <span>Kompatibilität</span>
78      <dt>
79        &lt;url&gt;
80      </dt>
81      <dd>
82        Der Pfad des Bildes, das als Hintergrund angezeigt werden
> soll. Bei relativen Angaben wird von der Datei, in der die Angab 
>e steht ausgegangen, auch bei externen Styledateien. 
83      </dd>
84      <dt>
85        none
86      </dt>
87      <dd>
88        Es wird kein Hintergrundbild verwendet
89      </dd>
90      <dt>
91        inherit
92      </dt>
93      <dd>
94        der Browser verwendet den Wert des Elternelements.
95      </dd>
96    </dl>
97    <p>
98      <br>
99    </p>101    </h3>
100    <h3 name="Beispiele">
101      Beispiele
102    </h3>
103    <table class="standard-table" style="width:100%">102    <table class="standard-table">
n106          <td class="header">n105          <th>
107            Ergebnis106            Browser
107          </th>
108          <th>
109            ab Version
110          </th>
111          <th>
112            mehrere Hintergrundbilder
113          </th>
114          <th>
115            Verläufe
116          </th>
117        </tr>
118        <tr>
108          </td>119          <td>
109          <td class="header">120            Internet Explorer
110            Quelltext
111          </td>
112        </tr>
113        <tr>
114          <td>121          </td>
115            Das Bild imgage.png wird als Hintergrundbild angezeig
>t. 
116            <p>
117              Leider keine Vorschau möglich.
118            </p>
119          </td>122          <td>
123            4.0
120          <td>124          </td>
125          <td>
126            ---
127          </td>
128          <td>
129            ---
130          </td>
131        </tr>
132        <tr>
133          <td>
134            Firefox (Gecko)
135          </td>
136          <td>
137            1.0 (1.0)
138          </td>
139          <td>
140            3.6 (1.9.2)
141          </td>
142          <td>
143            3.6 (1.9.2) [-moz-]
144          </td>
145        </tr>
146        <tr>
147          <td>
121            <pre>148            Opera
122background-image:url('image.png')149          </td>
123</pre>150          <td>
151            3.5
152          </td>
153          <td>
154            ---
155          </td>
156          <td>
157            ---
158          </td>
159        </tr>
160        <tr>
161          <td>
162            Safari (WebKit)
163          </td>
164          <td>
165            1.0 (85)
166          </td>
167          <td>
168            1.3 (312)
169          </td>
170          <td>
171            4.0 (528) [<a class=" external" href="http://develope
 >r.apple.com/mac/library/documentation/AppleApplications/Reference
 >/SafariCSSRef/Articles/Functions.html#//apple_ref/doc/uid/TP40007
 >955-SW25">-webkit-</a>]
n128    <h3 name="Browser-Kompatibilit.C3.A4t">n
129      Browser-Kompatibilität
130    </h3>176    <h3>
131    <pre class="eval">177      Spezifikation
132   <span class="comment">IE</span>178    </h3>
133</pre>179    <ul>
134    <pre class="eval">180      <li>
135   <span class="comment">Netscape</span>181        <a class="external" href="http://www.w3.org/TR/css3-backg
 >round/#background-image" lang="en">CSS 3 Background and Borders #
 >background-image</a>
136</pre>
137    <pre class="eval">
138   <span class="comment">Opera</span>
139</pre>
140    <pre class="eval">
141   <span class="comment">Firefox</span>
142</pre>
143    <pre class="eval">
144   <span class="comment">Konqueror</span>
145</pre>
146    <pre class="eval">
147   <span class="comment">Netscape</span>
148</pre>
149    <pre class="eval">
150   <span class="comment">Opera</span>
151</pre>
152    <pre class="eval">
153   <span class="comment">Firefox</span>
154</pre>
155    <pre class="eval">
156   <span class="comment">Konqueror</span>
157</pre>
158    <table class="standard-table" style="width:100%">
159      <tbody>
160        <tr>
161          <th class="header">
162            Browser
163          </th>
164          <th class="header" colspan="4">
165            Internet Explorer
166          </th>
167          <th class="header" colspan="4">
168            Netscape
169          </th>
170          <th class="header" colspan="6">
171            Opera
172          </th>
173          <th class="header" colspan="3">
174            Firefox
175          </th>
176          <th class="header" colspan="1">
177            Konqueror
178          </th>
179        </tr>182      </li>
180        <tr>183      <li>
181          <th>184        <a class="external" href="http://www.w3.org/TR/CSS21/colo
 >rs.html#propdef-background-image" lang="en">CSS 2.1 Colors and Ba
 >ckgrounds #background-image</a>
182            Version
183          </th>
184          <th class="header">
185            4
186          </th>
187          <th class="header">
188            5
189          </th>
190          <th class="header">
191            6
192          </th>
193          <th class="header">
194            7
195          </th>
196          <th class="header">
197            4
198          </th>
199          <th class="header">
200            5
201          </th>
202          <th class="header">
203            6
204          </th>
205          <th class="header">
206            7
207          </th>
208          <th class="header">
209            3
210          </th>
211          <th class="header">
212            4
213          </th>
214          <th class="header">
215            5
216          </th>
217          <th class="header">
218            6
219          </th>
220          <th class="header">
221            7
222          </th>
223          <th class="header">
224            8
225          </th>
226          <th class="header">
227            1
228          </th>
229          <th class="header">
230            2
231          </th>
232          <th class="header">
233            3
234          </th>
235          <th class="header">
236            3.5.x
237          </th>
238        </tr>185      </li>
239        <tr>186      <li>
240          <td>187        <a class="external" href="http://dev.w3.org/csswg/css3-im
 >ages/#gradients-" lang="en">CSS 3 Images #gradients</a> Editor's 
 >Draft
241            wird unterstützt
242          </td>
243          <td style="background:#5FE716">
244            Ja
245          </td>
246          <td style="background:#5FE716">
247            Ja
248          </td>
249          <td style="background:#5FE716">
250            Ja
251          </td>
252          <td style="background:#5FE716">
253            Ja
254          </td>
255          <td style="background:#5FE716">
256            Ja
257          </td>
258          <td style="background:#5FE716">
259            Ja
260          </td>
261          <td style="background:#5FE716">
262            Ja
263          </td>
264          <td style="background:#5FE716">
265            Ja
266          </td>
267          <td style="background:#5FE716" title="ab Version 3.5">
268            Ja *
269          </td>
270          <td style="background:#5FE716">
271            Ja
272          </td>
273          <td style="background:#5FE716">
274            Ja
275          </td>
276          <td style="background:#5FE716">
277            Ja
278          </td>
279          <td style="background:#5FE716">
280            Ja
281          </td>
282          <td style="background:#5FE716">
283            Ja
284          </td>
285          <td style="background:#5FE716">
286            Ja
287          </td>
288          <td style="background:#5FE716">
289            Ja
290          </td>
291          <td style="background:#5FE716">
292            Ja
293          </td>
294          <td style="background:#5FE716">
295            Ja
296          </td>
297        </tr>188      </li>
298      </tbody>
299    </table>189    </ul>
300    <h3 name="Siehe_auch">190    <h3>
nn193    <ul>
194      <li>
195        <a href="/de/CSS/background" title="de/CSS/background"><c
 >ode>background</code></a>, <a href="/de/CSS/background-attachment
 >" title="de/CSS/background-attachment"><code>background-attachmen
 >t</code></a>, <a href="/de/CSS/background-color" title="de/CSS/ba
 >ckground-color"><code>background-color</code></a>, <a href="/de/C
 >SS/background-position" title="de/CSS/background-position"><code>
 >background-position</code></a>, <a href="/de/CSS/background-repea
 >t" title="de/CSS/background-repeat"><code>background-repeat</code
 >></a>
196      </li>
197      <li>
198        <a href="/de/CSS/-moz-background-size" title="de/CSS/-moz
 >-background-size"><code>-moz-background-size</code></a>, <a href=
 >"/de/CSS/-moz-background-origin" title="de/CSS/-moz-background-or
 >igin"><code>-moz-background-origin</code></a>, <a href="/de/CSS/-
 >moz-background-clip" title="de/CSS/-moz-background-clip"><code>-m
 >oz-background-clip</code></a>
199      </li>
200      <li>
201        <a href="/de/CSS/-moz-linear-gradient"><code>-moz-linear-
 >gradient</code></a>, <a href="/de/CSS/-moz-radial-gradient"><code
 >>-moz-radial-gradient</code></a>, <a href="/de/CSS/-moz-repeating
 >-linear-gradient"><code>-moz-repeating-linear-gradient</code></a>
 >, <a href="/de/CSS/-moz-repeating-radial-gradient"><code>-moz-rep
 >eating-radial-gradient</code></a>
202      </li>
203    </ul>
t304      <a href="de/CSS/background">background</a>, <a href="de/CSSt205      {{ languages( {"en": "en/CSS/background-image", "fr": "fr/C
>/background-attachment">background-attachment</a>, <a href="de/CS>SS/background-image", "pl": "pl/CSS/background-image", "es": "es/
>S/background-color">background-color</a>, <a href="de/CSS/backgro>CSS/background-image" } ) }}
>und-position">background-position</a>, <a href="de/CSS/background 
>-repeat">background-repeat</a> 

Zurück zur Versionsgeschichte