background-position

  • Revision slug: CSS/background-position
  • Revision title: background-position
  • Revision id: 184470
  • Created:
  • Creator: Verruckt
  • Is current revision? Não
  • コメント

Revision Content

{{template.CSSRef()}}

Resumo

background-position configura a posição inicial de qualquer imagem de fundo que seja configurada.

  • Valor inicial: 0% 0%
  • Aplica-se a: todos os elementos
  • Herdado: não
  • Porcentagens: refere-se ao tamanho da própria caixa
  • Mídia: visual
  • Valor computado: para <length> o valor absoluto, se não uma porcentagem

Sintaxe

background-position: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit

Valores

<percentage> <percentage>
Com um par de valores de '0% 0%', o canto superior esquerdo da imagem é alinhado com o canto superior esquerdo do enchimento da borda da caixa. Um par de valores de '100% 100%' coloca o canto inferior direito da imagem no canto inferior direito da área de enchimento. Com um par de valores de '14% 84%', o ponto de 14% na horizontal e 84% na vertical da imagem é colocado no ponto 14% na horizontal e 84% na vertical da área de enchimento.
<length> <length>
Com um par de valores de '2cm 1cm', o canto superior esquerdo da imagem é colocado 2cm para a direita e 1cm abaixo do canto superior esquerdo da área de enchimento.
top left and left top
O mesmo que '0% 0%'.
top, top center, and center top
O mesmo que '50% 0%'.
right top and top right
O mesmo que '100% 0%'.
left, left center, and center left
O mesmo que '0% 50%'.
center and center center
O mesmo que '50% 50%'.
right, right center, and center right
O mesmo que '100% 50%'.
bottom left and left bottom
O mesmo que '0% 100%'.
bottom, bottom center, and center bottom
O mesmo que '50% 100%'.
bottom right and right bottom
O mesmo que '100% 100%'.

Se somente um valor é especificado, então ele configura a posição horizontal, com a posição vertical em 50%. Caso contrário, o primeiro valor especifica a posição horizontal. Combinações são permitidas de valores de palavras-chave, comprimento ou porcentagens, mas se palavras-chave forem misturadas com outros valores, 'left' e 'right' podem somente ser usados como o primeiro valor, e 'top' e 'down' podem somente ser usados como o segundo valor. Posições negativas são permitidas.

Exemplos

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

Notas

Especificações

Compatibilidade com navegadores

Navegador Versão mais antiga
Internet Explorer 4
Firefox 1
Netscape 6
Opera 3.5

Veja também

background

Categorias

Interwiki Language Links

{{ wiki.languages( { "en": "en/CSS/background-position", "fr": "fr/CSS/background-position", "pl": "pl/CSS/background-position" } ) }}

Revision Source

<p>
{{template.CSSRef()}}
</p>
<h3 name="Resumo"> Resumo </h3>
<p><code>background-position</code> configura a posição inicial de qualquer imagem de fundo que seja configurada.
</p>
<ul><li> Valor inicial: 0% 0%
</li><li> Aplica-se a: todos os elementos
</li><li> Herdado: não
</li><li> Porcentagens: refere-se ao tamanho da própria caixa
</li><li> Mídia: <a href="pt/CSS/Media/Visual">visual</a>
</li><li> Valor computado: para &lt;length&gt; o valor absoluto, se não uma porcentagem
</li></ul>
<h3 name="Sintaxe"> Sintaxe </h3>
<pre class="eval">background-position: [ [ &lt;percentage&gt; | &lt;length&gt; | left | center | right ] [ &lt;percentage&gt; | &lt;length&gt; | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
</pre>
<h3 name="Valores"> Valores </h3>
<dl><dt>  &lt;percentage&gt; &lt;percentage&gt;</dt><dd> Com um par de valores de '0% 0%', o canto superior esquerdo da imagem é alinhado com o canto superior esquerdo do enchimento da borda da caixa. Um par de valores de '100% 100%' coloca o canto inferior direito da imagem no canto inferior direito da área de enchimento. Com um par de valores de '14% 84%', o ponto de 14% na horizontal e 84% na vertical da imagem é colocado no ponto 14% na horizontal e 84% na vertical da área de enchimento.
</dd><dt>  &lt;length&gt;  &lt;length&gt;</dt><dd> Com um par de valores de '2cm 1cm', o canto superior esquerdo da imagem é colocado 2cm para a direita e 1cm abaixo do canto superior esquerdo da área de enchimento.
</dd><dt>top left and left top</dt><dd> O mesmo que '0% 0%'.
</dd><dt>top, top center, and center top</dt><dd> O mesmo que '50% 0%'.
</dd><dt>right top and top right</dt><dd> O mesmo que '100% 0%'.
</dd><dt>left, left center, and center left</dt><dd> O mesmo que '0% 50%'.
</dd><dt>center and center center</dt><dd> O mesmo que '50% 50%'.
</dd><dt>right, right center, and center right</dt><dd> O mesmo que '100% 50%'.
</dd><dt>bottom left and left bottom</dt><dd> O mesmo que '0% 100%'.
</dd><dt>bottom, bottom center, and center bottom</dt><dd> O mesmo que '50% 100%'.
</dd><dt>bottom right  and right bottom</dt><dd> O mesmo que '100% 100%'.
</dd></dl>
<p>Se somente um valor é especificado, então ele configura a posição horizontal, com a posição vertical em 50%. Caso contrário, o primeiro valor especifica a posição horizontal. Combinações são permitidas de valores de palavras-chave, comprimento ou porcentagens, mas se palavras-chave forem misturadas com outros valores, <code>'left'</code> e <code>'right'</code> podem somente ser usados como o primeiro valor, e <code>'top'</code> e <code>'down'</code> podem somente ser usados como o segundo valor. Posições negativas são permitidas.
</p>
<h3 name="Exemplos"> Exemplos </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>
<h3 name="Notas"> Notas </h3>
<h3 name="Especifica.C3.A7.C3.B5es"> Especificações </h3>
<ul><li> <a class="external" href="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">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-position">CSS 3</a>
</li></ul>
<h3 name="Compatibilidade_com_navegadores"> Compatibilidade com navegadores </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Navegador</th>
    <th>Versão mais antiga</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>
<h3 name="Veja_tamb.C3.A9m"> Veja também </h3>
<p><a href="pt/CSS/background">background</a>
</p><p><span class="comment">Categorias</span>
</p><p><span class="comment">Interwiki Language Links</span>
</p>{{ wiki.languages( { "en": "en/CSS/background-position", "fr": "fr/CSS/background-position", "pl": "pl/CSS/background-position" } ) }}
Revert to this revision