background-position

  • Artículo

Establece o recupera la posición del fondo del objeto.

Sintaxis

{ background-position: sPosition }

Valores posibles

sPosition

Cadena que especifica o recibe uno o dos de los valores siguientes:

longitud

Número de punto flotante seguido de un designador de unidades absolutas (cm, mm, in, pt o pc) o de un designador de unidades relativas (em, ex o px).

porcentaje

Entero seguido de un signo de porcentaje (%). El valor es un porcentaje del ancho o alto del objeto:

  • Valor de alineación vertical. Los valores posibles son:

    • top   Se alinea verticalmente a la parte superior.

    • center   Se alinea verticalmente al centro.

    • bottom   Se alinea verticalmente a la parte inferior.

  • Valor de alineación horizontal. Los valores posibles son:

    • left   Se alinea horizontalmente a la izquierda.

    • center   Se alinea horizontalmente al centro.

    • right   Se alinea horizontalmente a la derecha.

Esta propiedad tiene el valor predeterminado 0% 0%. No se hereda.

Observaciones

Si solo se establece un valor, dicho valor se aplica a la coordenada horizontal y la coordenada vertical se establece en 50%. Si se establecen ambos valores, el primer valor se aplica a la coordenada horizontal y el segundo valor se aplica a la coordenada vertical.

Si se establecen los valores en 0% 0%, la propiedad background-image se posiciona en el borde superior izquierdo del contenido del elemento, sin incluir el espaciado interno.

Si se especifica el valor right center, tiene el siguiente efecto: puesto que right se supone que es una dirección de la coordenada x, right reemplaza el valor center, y el fondo se desplaza hacia la derecha en consecuencia.

Esta propiedad se puede establecer con otras propiedades de fondo mediante la propiedad compuesta background.

Ejemplos

En el siguiente ejemplo se usa la propiedad background-position para especificar la posición de una imagen de fondo. Se utiliza una llamada a una hoja de estilo incrustada (global) para mover la esfera:

<style>
    .style1 {background-position:top center}
    .style2 {background-position:bottom right}
</style>
</head><body onload="ospan.className='style1'">
<span style="font-size:14; width:250;" id="ospan"
      onmouseover="this.className='style2'"
      onmouseout="this.className='style1'">
. . . 
</span> 

Información sobre estándares

Esta propiedad se define en la especificación Cascading Style Sheets (CSS), Level 1 (CSS1) (Hojas de estilos en cascada (CSS), nivel 1 (CSS1)).

Aplicable a

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CUSTOM, DD, DEFAULTS, DFN, DIV, DL, DT, EM, FIELDSET, FORM, HN, HTML, I, IMG, INPUT TYPE=BUTTON, INPUT TYPE=CHECKBOX, INPUT TYPE=FILE, INPUT TYPE=IMAGE, INPUT TYPE=PASSWORD, INPUT TYPE=RADIO, INPUT TYPE=RESET, INPUT TYPE=SUBMIT, INPUT TYPE=TEXT, LI, OL, P, S, SPAN, SUB, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Vea también

Conceptos

background