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
|
---
title: background
slug: Web/CSS/background
tags:
- CSS
- CSS Tło
- 'CSS:Dokumentacje'
- Dokumentacje
- Wszystkie_kategorie
translation_of: Web/CSS/background
---
<p>{{ CSSRef() }}</p>
<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2>
<p>Własność <strong><code>background</code></strong> jest skrótem do ustawiania poszczególnych wartości tła z jednego miejsca w arkuszu stylów. Właściwość <strong><code>background</code></strong> może być stosowana do ustawiania wartości dla jednej lub więcej z wymienionych warstw własności: {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}.</p>
<p>{{cssinfo}}</p>
<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2>
<pre class="eval">background: [ <em><background-color></em> || <em><background-image></em> ||
<em><background-repeat></em> || <em><background-attachment></em> ||
<em><background-position></em>
] | {{ Cssxref("inherit") }} ;
</pre>
<p>Właściwość <strong>background </strong>jest deklarowana przez jedną lub więcej warstw tej właściwości, oddzielonych przecinkami.</p>
<p>Składnia każdej z warstw jest następująca:</p>
<ul>
<li>Każda warstwa może zawierać zero lub jedno wystąpienie którejś z następujących wartości:<code></code>
<ul>
<li><attachment></li>
<li><repeat-style></li>
<li><bg-size></li>
<li><position></li>
<li><bg-image></li>
</ul>
</li>
<li>Wartość <bg-size> może być wstawiona bezpośrednio po wartości <position>, oddzielonej znakiem '/', np. "<code>center/80%</code>".</li>
<li>Wartość <box> może być wstawiona zero, jeden lub dwa razy. Jeśli jest wstawiona raz - ustawia zarówno {{cssxref("background-origin")}} jak i {{cssxref("background-clip")}}. Jeśli wystąpi dwa razy - pierwsze wystąpienie ustawia {{cssxref("background-origin")}}, a drugie {{cssxref("background-clip")}}.</li>
<li>Wartość <background-color> może być wstawiona jedynie w specyfikacji ostatniej warstwy.</li>
</ul>
<dl>
<dd> </dd>
</dl>
<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3>
<dl>
<dt>background-color</dt>
<dd>Zobacz <code><a href="/pl/CSS/background-color" title="pl/CSS/background-color">background-color</a></code>.</dd>
<dt>background-image </dt>
<dd>Zobacz <code><a href="/pl/CSS/background-image" title="pl/CSS/background-image">background-image</a></code>.</dd>
<dt>background-repeat </dt>
<dd>Zobacz <code><a href="/pl/CSS/background-repeat" title="pl/CSS/background-repeat">background-repeat</a></code>.</dd>
<dt>background-attachment </dt>
<dd>Zobacz <code><a href="/pl/CSS/background-attachment" title="pl/CSS/background-attachment">background-attachment</a></code>.</dd>
<dt>background-position </dt>
<dd>Zobacz <code><a href="/pl/CSS/background-position" title="pl/CSS/background-position">background-position</a></code>.</dd>
</dl>
<h2 id="Przykłady">Przykłady</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p class="topbanner">
Starry sky<br/>
Twinkle twinkle<br/>
Starry sky
</p>
<p class="warning">Here is a paragraph<p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush:css' highlight:[2,6];">.warning {
background: red;
}
.topbanner {
background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
}
</pre>
<h3 id="Result">Result</h3>
<p>{{EmbedLiveSample("Examples")}}</p>
<h2 id="Notatki" name="Notatki">Notatki</h2>
<p>Biorąc pod uwagę sensowność deklaracji, własność <strong><code>background</code></strong> najpierw ustawia poszczególne własności <strong>tła</strong> na ich domyślne wartości, potem przydziela jawnie wartości określone w deklaracji. Nie musisz definiować wartości dla każdej warstwy, wystarczy, że zadeklarujesz tylko te, które chcesz zmienić z wartości domyślnej.</p>
<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2>
<ul>
<li><a class="external" href="http://www.w3.org/TR/CSS1#background">CSS 1</a></li>
<li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">CSS 2.1</a></li>
<li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background">CSS 3</a></li>
</ul>
<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2>
<table class="standard-table">
<tbody>
<tr>
<th>Przeglądarka</th>
<th>Najniższa wersja</th>
</tr>
<tr>
<td>Internet Explorer</td>
<td>4</td>
</tr>
<tr>
<td>Firefox</td>
<td>1</td>
</tr>
<tr>
<td>Netscape</td>
<td>6</td>
</tr>
<tr>
<td>Opera</td>
<td>3.5</td>
</tr>
</tbody>
</table>
<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2>
<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p>
|
