Posición de fondo - Trucos CSS

Anonim

La background-positionpropiedad en CSS le permite mover una imagen de fondo (o degradado) dentro de su contenedor.

html ( background-position: 100px 5px; )

Tiene tres tipos diferentes de valores:

  • Valores de longitud (p 100px 5px. Ej. )
  • Porcentajes (p 100% 5%. Ej. )
  • Palabras clave (p top right. Ej. )

Los valores predeterminados son 0 0. Esto coloca su imagen de fondo en la parte superior izquierda del contenedor.

Los valores de longitud son bastante simples: el primer valor es la posición horizontal, el segundo valor es la posición vertical. Entonces 100px 5pxmoverá la imagen 100px hacia la derecha y cinco píxeles hacia abajo. Puede establecer valores de longitud en px, emo cualquiera de los otros valores de longitud de CSS.

Los porcentajes funcionan de forma un poco diferente. Saque sus sombreros matemáticos: mover una imagen de fondo en X% significa que alineará el punto X% en la imagen con el punto X% en el contenedor. Por ejemplo, 50%significa que alineará la mitad de la imagen con la mitad del contenedor. 100%significa que alineará el último píxel de la imagen con el último píxel del contenedor, y así sucesivamente.

Las palabras clave son solo atajos para los porcentajes. Es más fácil de recordar y escribir top rightque 100% 0, y es por eso que las palabras clave son importantes. Aquí hay una lista de las cinco palabras clave y sus valores equivalentes:

  • top: 0% verticalmente
  • right: 100% horizontalmente
  • bottom: 100% verticalmente
  • left: 0% horizontalmente
  • center: 50% horizontalmente si la horizontal aún no está definida. Si es así, se aplica verticalmente.

Es interesante notar que no importa el orden que use para las palabras clave: top centeres el mismo que center top. Sin embargo, solo puede hacer esto si está utilizando exclusivamente palabras clave. center 10%no es lo mismo que 10% center.

Manifestación

Esta demostración muestra ejemplos de background-positionconjuntos con unidades de longitud, porcentajes y palabras clave.

Vea los valores de la posición de fondo del lápiz por CSS-Tricks (@ css-tricks) en CodePen.

Declaración de valores

Puede proporcionar background-positionhasta cuatro valores en los navegadores modernos (consulte la tabla de compatibilidad con navegadores para obtener más detalles).

Si declara un valor , ese valor es el desplazamiento horizontal. El navegador establece el desplazamiento vertical en center.

Cuando declara dos valores , el primer valor es el desplazamiento horizontal y el segundo valor es el desplazamiento vertical.

Las cosas se complican un poco cuando comienzas a usar tres o cuatro valores, pero también obtienes más control sobre la ubicación del fondo.

Una sintaxis de tres o cuatro valores alterna entre palabras clave y unidades de longitud o porcentaje. Puede utilizar cualquiera de los valores de palabras clave excepto centeren una background-positiondeclaración de tres o cuatro valores .

Cuando especifica tres valores , el navegador interpreta el cuarto valor "faltante" como 0. A continuación, se muestra un ejemplo de un valor de tres background-position:

#threevalues ( background-position: right 45px bottom; )

Esto coloca la imagen de fondo a 45 px de la derecha y 0 px de la parte inferior del contenedor.

A continuación, se muestra un ejemplo de un valor de cuatro background-position :

#fourvalues ( background-position: right 45px bottom 20px; )

Esto coloca la imagen de fondo a 45 px de la derecha y 20 px de la parte inferior del contenedor.

Observe el orden de los valores en los ejemplos anteriores: palabras clave seguidas de unidades de longitud. Un valor de tres o cuatro background-positiondebe seguir ese formato, con una palabra clave antes de una unidad de longitud o porcentaje.

Manifestación

Esta demostración incluye ejemplos de un valor, dos valores, tres valores y cuatro valores background-position.

Consulte la sintaxis de valores de la posición de fondo 1, 2, 3 y 4 del lápiz por CSS-Tricks (@ css-tricks) en CodePen.

Relacionado

  • adjunto de fondo
  • clip de fondo
  • color de fondo
  • imagen de fondo
  • origen de fondo
  • repetición de fondo
  • tamaño de fondo

Más recursos

  • background-position en la especificación CSS3
  • background-position en MDN
  • Imágenes de fondo compensadas

Soporte del navegador

Los valores básicos se apoyan en todas partes. La sintaxis de cuatro valores tiene este soporte:

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
25 13 9 12 7

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
88 85 4.4 7.0-7.1

Ese es el mismo nivel de soporte que las propiedades background-position-xy background-position-y.