background-position

  • Revision slug: CSS/background-position
  • Revision title: background-position
  • Revision id: 134067
  • Created:
  • Creator: pbrenna
  • Is current revision?
  • Comment 10 words added, 8 words removed

Revision Content

 

Sommario
Edit section

background-position imposta la posizione iniziale dell'immagine di sfondo impostata.

Sintassi
Edit section

background-position: [ <percentuale> | <lunghezza> | left | center | right  ] 
                     [ <percentuale> | <lunghezza> | top  | center | bottom ] ? ;
background-position: [ top | center | bottom ];
background-position: inherit;

Valori
Edit section

<percentuale>
Con un valore di '0% 0%', l'angolo in alto a destra dell'immagine è allineato con l'angolo in alto a destra 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.
<lunghezza>
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.
top left e left top
Come '0% 0%'.
top, top center, e center top
Come '50% 0%'.
right top e top right
Come '100% 0%'.
left, left center, e center left
Come '0% 50%'.
center e center center
Come '50% 50%'.
right, right center, e center right
Come '100% 50%'.
bottom left e left bottom
Come '0% 100%'.
bottom, bottom center, e center bottom
Come '50% 100%'.
bottom right e right bottom
Come '100% 100%'.

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).

Esempi
Edit section

.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%;
}

Specifiche
Edit section

Compatibilità tra browser
Edit section

Browser Versione più vecchia
Internet Explorer 4
Firefox 1
Netscape 6
Opera 3.5

Revision Source

<p> </p>
<div id="section_1">
<h3 class="editable" id="_Sommario

"><span> Sommario</span>
<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="visibility: hidden;" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
</h3>
<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 &lt;lunghezza&gt; il valore assoluto o la percentuale.</li>
</ul>
</div>
<div id="section_2">
<h3 class="editable" id="_Sintassi_

"><span> Sintassi </span>
<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="visibility: hidden;" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
</h3>
<pre class="eval">background-position: [ &lt;percentuale&gt; | &lt;lunghezza&gt; | left | center | right  ] 
                     [ &lt;percentuale&gt; | &lt;lunghezza&gt; | 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>
<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="visibility: hidden;" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
</h3>
<dl> <dt> <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/percentage" rel="internal">&lt;percentuale&gt;</a></code></span> </span></dt> <dd> Con un valore di '0% 0%', l'angolo in alto a destra dell'immagine è allineato con l'angolo in alto a destra 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.<br> </dd> <dt> <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/length" rel="internal">&lt;lunghezza&gt;</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>
<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="visibility: hidden;" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
</h3>
<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>
<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="visibility: hidden;" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS1#background-position" rel="external nofollow" target="_blank" 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" target="_blank" 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" target="_blank" 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>
<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="visibility: hidden;" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
</h3>
<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_annche

"><span> Vedere annche</span>
<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="visibility: hidden;" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
</h3>
<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>
Revert to this revision