Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad de posición de fondo
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada Propiedad de posición de fondo Con sintaxis y ejemplos.
describir
La propiedad background-position de CSS define la posición inicial de la imagen de fondo de un elemento.
sintaxis
La sintaxis de la propiedad CSS background-position es:
background-position: horizontal_value [vertical_value];parámetro o parámetro
valor de nivel
Define la posición horizontal de la imagen de fondo. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| estable | valor fijo en px, em, … div {imagen de fondo: url (“logo.png”); posición de fondo: 0px 10px; } |
| porcentaje | valor porcentual div {imagen de fondo: url(“logo.png”); posición de fondo: 25% 50%; } |
| permanecer | La imagen se alinea horizontalmente a la izquierda. Equivalente al 0% de la posición horizontal div {imagen de fondo: url(“logo.png”); posición de fondo: esquina superior izquierda; } |
| central | La imagen está centrada horizontalmente. Equivale al 50% de la posición horizontal div {imagen de fondo: url (“logo.png”); posición de fondo: centro superior; } |
| derecho | La imagen se alinea horizontalmente a la derecha. Equivalente al 100% de la posición horizontal div {imagen de fondo: url(“logo.png”); posición de fondo: arriba a la derecha; } |
| heredar | El elemento heredará la posición de fondo de su elemento principal div {imagen de fondo: url (“logo.png”); posición de fondo: heredar; } |
valor vertical
Electivo. Define la posición vertical de la imagen de fondo. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| estable | valor fijo en px, em, … div {imagen de fondo: url (“logo.png”); posición de fondo: 25px 30px; } |
| porcentaje | valor porcentual div {imagen de fondo: url(“logo.png”); posición de fondo: 10% 25%; } |
| óptimo | La imagen está alineada verticalmente en la parte superior. Equivale al 0% de la posición vertical div {imagen de fondo: url(“logo.png”); posición de fondo: esquina superior izquierda; } |
| central | La imagen está centrada verticalmente. Equivale al 50% de la posición vertical div {imagen de fondo: url (“logo.png”); posición de fondo: centro izquierdo; } |
| fondo | La imagen se alinea verticalmente en la parte inferior. Equivale al 100% de la posición vertical div {imagen de fondo: url(“logo.png”); posición de fondo: esquina inferior izquierda; } |
| heredar | El elemento heredará la posición de fondo de su elemento principal div {imagen de fondo: url (“logo.png”); posición de fondo: heredar; } |
notas
- El primer valor representa la posición horizontal de la imagen de fondo y el segundo valor representa la posición vertical de la imagen de fondo.
- Si no se proporciona un valor_vertical, la propiedad de posición de fondo de CSS asumirá que el valor_vertical es el centro.
Compatibilidad del navegador
La propiedad CSS background-position tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- Firefox (Geco)
- Navegador de Internet (IE)
- ópera
- Safari (WebKit)
ejemplo
Discutiremos la propiedad background-position a continuación, explorando ejemplos de cómo usarla en CSS.
uso fijo
Veamos un ejemplo de una posición de fondo CSS usando un valor fijo.
div { background-image: url("/images/logo.png");
background-position: 0px 45px; }En este ejemplo de posición de fondo CSS, usamos el archivo logo.png como
También es aconsejable establecer el color de fondo al configurar la imagen de fondo, en caso de que la imagen no esté disponible. Modifiquemos nuestro ejemplo para agregar un color de fondo negro.
div { background-color: black;
background-image: url("/images/logo.png");
background-position: 0px 45px; }Ahora, si la imagen logo.png no está disponible,
porcentaje de uso
Veamos un ejemplo de posición de fondo CSS usando valores porcentuales.
div { background-color: white;
background-image: url("/images/logo2.png");
background-position: 50% 50%; }En este ejemplo de posición de fondo CSS, usamos el archivo logo2.png como
usar palabras clave
Veamos un ejemplo de posición de fondo CSS usando valores de palabras clave (es decir: centro, arriba, abajo, izquierda, derecha).
div { background-color: blue;
background-image: url("/images/logo3.png");
background-position: left top; }En este ejemplo de posición de fondo CSS, usamos el archivo logo3.png como