Background Position (Posición del fondo)
La propiedad background-position da la posición inicial de la background image (imagen de fondo) especificada. Esta propiedad solo puede aplicarse a elementos de nivel bloque y a elementos reemplazados. (Un elemento reemplazado es aquel del que solo se conocen las dimensiones intrínsecas; los elementos reemplazados HTML incluyen IMG, INPUT, TEXTAREA, SELECT, y OBJECT.)
La forma más sencilla de asignar una ubicación de fondo es con palabras clave:
• Palabras clave horizontales (left, center, right)
• Palabras clave horizontales verticales (top, center, bottom)
Quote (INFO)
El atributo align que puede tomar los siguientes valores: left, right, top, texttop, middle, absmiddle, bottom, absbottom, baseline.
HTML
Quote (HTML)
<img src="imagen.jpg" alt="Esto es una imagen" align=right>
CSS
Quote (CSS)
.imagen {
background-image: url(http://unviciomas.com/imagen.png);
background-repeat: repeat-x;
background-position: bottom;
padding:10 0px;
}
También pueden usarse porcentajes y longitudes para asignar la posición de la imagen de fondo. Los porcentajes son relativos al tamaño del elemento. Aunque se permiten longitudes, no se recomiendan debido a su inherente debilidad al tratar con diferentes resoluciones de pantalla.
Al usar porcentajes o longitudes, la posición horizontal se especifica primero, seguida de la posición vertical. Un valor como 20% 65% especifica que la imagen se colocará 20% a la derecha y 65% abajo del elemento. Un valor como 5px 10px especifica que la esquina superior izquierda de la imagen se colocará 5 pixels a la derecha y 10 pixels abajo de la esquina superior izquierda del elemento.
Si solo se da el valor horizontal, la posición vertical será 50%. Se permiten combinaciones de longitudes y porcentajes, ya que son posiciones negativas. Por ejemplo, 10% -2cm está permitido. Sin embargo, porcentajes y longitudes no pueden combinarse con palabras clave.
Las palabras clave son interpretadas como sigue;
top left = left top = 0% 0%
top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100%
bottom right = right bottom = 100% 100%
Si la imagen de fondo está fija en relación al lienzo, la imagen es colocada en relación al lienzo y no al elemento.