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 fondo
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada antecedentes Con sintaxis y ejemplos.
describir
La propiedad de fondo de CSS define la posición inicial de la imagen de fondo del elemento. Es una propiedad abreviada para configurar las propiedades CSS background-color, background-image, background-repeat, background-attachment y background-position.
sintaxis
La sintaxis de la propiedad de fondo CSS es:
background: background-color background-image background-repeat
background-attachment
background-position-horizontal
[background-position-vertical];parámetro o parámetro
background-color es el color de fondo del elemento. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| #RRGGBB | Representación hexadecimal del color de fondo div {fondo: #FF0000; } |
| RGB() | Representación RGB del color de fondo div {fondo:RGB(255,0,0); } |
| nombre del color | El nombre del color de fondo (es decir, rojo, azul, negro, blanco) div {fondo: rojo;} |
| transparente | Indica al elemento que muestre el color de fondo de los elementos que hay detrás. El valor predeterminado de CSS background-color es transparente. div {fondo: transparente;} |
background-image es la imagen de fondo del elemento. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| URL | Ubicación de los recursos de imagen div {fondo: url(“/images/logo.png”); } |
| no cualquiera | No se aplica ninguna decoración de texto al texto. div {fondo: ninguno; } |
background-repeat define si la imagen de fondo se repite. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| repetir | La imagen se repite horizontal y verticalmente div {fondo: url(“logo.png”) repetir; } |
| repetir -x | La imagen se repite horizontalmente div {fondo: url(“logo.png”) repetir-x; } |
| repetir -y | La imagen se repite verticalmente div {fondo: url(“logo.png”) repetir-y; } |
| no repetir | La imagen no se repite div {fondo: url(“logo.png”) no repetido; } |
| ronda | La imagen se repite varias veces.Si no se logra un ajuste exacto, la imagen se volverá a escalar div {fondo: url(“logo.png”) circulo; } |
| espacio | La imagen se repite muchas veces y encaja perfectamente.Si no se logra una coincidencia exacta, se muestra un espacio en blanco entre las imágenes div {fondo: url(“logotipo.png”) espacio; } |
background-attachment define si la imagen de fondo se desplaza. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| Desplazarse | La imagen se desplazará junto con el bloque que contiene. div {fondo: url(“logo.png”) desplazamiento; } |
| estable | La imagen se fija dentro de la ventana gráfica y no se desplaza con el bloque que la contiene. div {fondo: url(“logo.png”) arreglado; } |
background-position-horizontal 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 {fondo: url(“logotipo.png”) 0px 10px; } |
| porcentaje | valor porcentual div {fondo: url(“logo.png”) 25% 50%; } |
| permanecer | La imagen se alinea horizontalmente a la izquierda. Equivalente al 0% de la posición horizontal div {fondo: url(“logo.png”) esquina superior izquierda; } |
| central | La imagen está centrada horizontalmente. Equivale al 50% de la posición horizontal div {fondo: url(“logo.png”) parte superior central; } |
| derecho | La imagen se alinea horizontalmente a la derecha. Equivalente al 100% de la posición horizontal div {fondo: url(“logo.png”) esquina superior derecha; } |
La posición de fondo vertical es opcional. 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 {fondo: url(“logo.png”) 25px 30px; } |
| porcentaje | valor porcentual div {fondo: url(“logo.png”) 10% 25%; } |
| óptimo | La imagen está alineada verticalmente en la parte superior. Equivale al 0% de la posición vertical div {fondo: url(“logo.png”) esquina superior izquierda; } |
| central | La imagen está centrada verticalmente. Equivale al 50% de la posición vertical div {fondo: url(“logo.png”) centro izquierda; } |
| fondo | La imagen se alinea verticalmente en la parte inferior. Equivale al 100% de la posición vertical div {fondo: url(“logo.png”) esquina inferior izquierda; } |
notas
- Puede ingresar los valores para las propiedades de fondo de CSS en cualquier orden.
- Si establece un valor para la imagen de fondo, se recomienda que también establezca un valor para el color de fondo en caso de que la imagen no esté disponible.
- Si se proporciona un valor de posición horizontal de fondo pero no se proporciona un valor de posición vertical de fondo, la posición de fondo vertical se establecerá de forma predeterminada en el centro.
- ¿Necesita convertir sus valores de color a una representación diferente? Pruebe esta herramienta en línea para convertir sus valores de color entre hexadecimal y RGB.
Compatibilidad del navegador
La propiedad de fondo CSS 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 de fondo a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.
establecer el color como fondo
Veamos un ejemplo de fondo CSS donde le mostramos cómo configurar el color de fondo.
div { background: white; }En este ejemplo de fondo CSS, tenemos
establecer imagen como fondo
Veamos un ejemplo en el que proporcionamos un archivo de imagen para usar como fondo.
div { background: url("/images/gradient.png"); }En este ejemplo de fondo de CSS, vamos a
También es aconsejable configurar la imagen de fondo para configurar también el color de fondo en caso de que la imagen no esté disponible. Modifiquemos nuestro ejemplo para agregar un color de fondo negro.
div { background: black url("/images/gradient.png"); }Ahora, si la imagen de degradado.png no está disponible,
Finalmente, configuremos la imagen para que se repita horizontalmente.
div { background: black url("/images/gradient.png") repeat-x; }Hacemos esto agregando repetir-x a la propiedad de fondo.