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
156
157
158
|
---
title: background-position
slug: Web/CSS/background-position
translation_of: Web/CSS/background-position
---
<p> </p>
<div id="section_1">
<h3 class="editable" id="Sommario"><span>Sommario</span></h3>
<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
<p><code>background-position</code> imposta la posizione iniziale dell'immagine di sfondo impostata.</p>
<ul>
<li><span class="lang lang-en"><a href="../../../../en/CSS/initial_value" rel="internal">Valore iniziale</a> </span>: 0% 0%</li>
<li>Si applica a: tutti gli elementi</li>
<li><span class="lang lang-en"><a href="../../../../en/CSS/inheritance" rel="internal">Ereditabile</a> </span>: no</li>
<li>Percentuali: si riferiscono alle dimensioni del blocco stesso</li>
<li>Media: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/Media/Visual" rel="internal">visual</a></code></span> </span></li>
<li><span class="lang lang-en"><a href="../../../../en/CSS/computed_value" rel="internal">Valore riconosciuto</a></span>: per <lunghezza> il valore assoluto o la percentuale.</li>
</ul>
</div>
<div id="section_2">
<h3 class="editable" id="Sintassi"><span>Sintassi </span></h3>
<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
<pre class="eval">background-position: [ <percentuale> | <lunghezza> | left | center | right ]
[ <percentuale> | <lunghezza> | top | center | bottom ] ? ;
</pre>
<pre class="eval">background-position: [ top | center | bottom ];
</pre>
<pre class="eval">background-position: inherit;
</pre>
</div>
<div id="section_3">
<h3 class="editable" id="Valori"><span>Valori</span></h3>
<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
<dl>
<dt><span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/percentage" rel="internal"><percentuale></a></code></span> </span></dt>
<dd>Con un valore di '0% 0%', l'angolo in alto a sinistra dell'immagine è allineato con l'angolo in alto a sinistra dell'angolo del padding del box. Un valore di '100% 100%' posiziona l'angolo in basso a destra dell'immagine nell'angolo in basso a destra dell'area di padding del box. Con un valore, per esempio, di '14% 84%', l'angolo in alto a sinistra dell'immagine sarà al punto '14%; 84%' dell'area di padding del box.</dd>
<dt><span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/length" rel="internal"><lunghezza></a></code></span> </span></dt>
<dd>Con un valore di '2cm 1cm', l'angolo in alto a sinistra dell'immagine si trova 2cm a destra e 1cm più in basso dell'angolo in alto a sinistra dell'area di padding del box.</dd>
<dt>top left e left top</dt>
<dd>Come '0% 0%'.</dd>
<dt>top, top center, e center top</dt>
<dd>Come '50% 0%'.</dd>
<dt>right top e top right</dt>
<dd>Come '100% 0%'.</dd>
<dt>left, left center, e center left</dt>
<dd>Come '0% 50%'.</dd>
<dt>center e center center</dt>
<dd>Come '50% 50%'.</dd>
<dt>right, right center, e center right</dt>
<dd>Come '100% 50%'.</dd>
<dt>bottom left e left bottom</dt>
<dd>Come '0% 100%'.</dd>
<dt>bottom, bottom center, e center bottom</dt>
<dd>Come '50% 100%'.</dd>
<dt>bottom right e right bottom</dt>
<dd>Come '100% 100%'.</dd>
</dl>
<p>Se viene specificato solo un valore, quello imposta la distanza orizzontale, e la posizione verticale si imposta a 50%. Al contrario, il primo valore specifica la posizione orizzontale. Sono possibili combinazioni di parole, lunghezze o percentuali, ma se si mischiano le parole con i valori, 'left' e 'right' potrebbero solo essere usati come primo valore (indicano una posizione orizzontale), mentre 'top' e 'bottom' solo per il secondo valore (indicano infatti una posizione verticale).</p>
</div>
<div id="section_4">
<h3 class="editable" id="Esempi"><span>Esempi</span></h3>
<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
<pre>.exampleone {
background-image: url("logo.png");
background-position: top center;
}
.exampletwo {
background-image: url("logo.png");
background-position: 25% 75%;
}
.examplethree {
background-image: url("logo.png");
background-position: 2cm bottom;
}
.examplefour {
background-image: url("logo.png");
background-position: center 10%;
}
.examplefive {
background-image: url("logo.png");
background-position: 2cm 50%;
}
</pre>
</div>
<div id="section_5">
<h3 class="editable" id="Specifiche"><span>Specifiche</span></h3>
<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
<ul>
<li><a class="external" href="http://www.w3.org/TR/CSS1#background-position" rel="external nofollow" title="http://www.w3.org/TR/CSS1#background-position">CSS 1</a></li>
<li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position" rel="external nofollow" title="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">CSS 2.1</a></li>
<li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-position" rel="external nofollow" title="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-position">CSS 3</a></li>
</ul>
</div>
<div id="section_6">
<h3 class="editable" id="Compatibilità_tra_browser"><span>Compatibilità tra browser</span></h3>
<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
<table class="standard-table">
<tbody>
<tr>
<th>Browser</th>
<th>Versione più vecchia</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>
</div>
<div id="section_7">
<h3 class="editable" id="Vedere_anche"><span>Vedere anche</span></h3>
<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
<p><span class="lang lang-en"><span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background" rel="internal" title="../../it/CSS/background">background</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-attachment" rel="internal" title="../../it/CSS/background-attachment">background-attachment</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-color" rel="internal" title="../../it/CSS/background-color">background-color</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-image" rel="internal" title="../../it/CSS/background-image">background-image</a></code></span> , <span class="lang lang-en"><code><strong>background-position</strong></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-repeat" rel="internal" title="../../it/CSS/background-repeat">background-repeat</a></code></span> </span></p>
</div>
<p> </p>
|
