Existen tres maneras de usar imágenes de fondo en CSS, o background image:
1. Usando la propiedad “background-image”:
body {
background-image: url("your-image-url.jpg");
}
Donde “your-image-url.jpg” es la URL de la imagen que deseas usar como fondo. También puedes usar una ruta relativa a la ubicación del archivo CSS o una URL absoluta para la imagen.
Lee también: Cómo configurar un logo para el modo oscuro en tu sitio web
2. Usando “background” como una propiedad abreviada:
body {
background: url("your-image-url.jpg") no-repeat center center fixed;
}
La propiedad “background” en CSS es una propiedad abreviada que permite especificar varios valores para el fondo de un elemento HTML en una sola línea. En lugar de escribir varias propiedades individuales como “background-image”, “background-repeat”, “background-position” y “background-size”, puedes escribir todos esos valores en una sola propiedad “background”.
La sintaxis de la propiedad “background” es la siguiente:
background: [background-image] [background-repeat] [background-position] [background-size];Donde cada uno de los valores entre corchetes es opcional y puede ser reemplazado por un valor válido. Por ejemplo:
body {
background: url("your-image-url.jpg") no-repeat center center / cover;
}
Este código es equivalente a escribir:
body {
background-image: url("your-image-url.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
La propiedad abreviada "background" es útil porque permite escribir el código de manera más concisa y legible, y es ampliamente utilizada en la práctica.
3. Usando “background-repeat”, “background-position” y “background-size” para controlar el comportamiento de la imagen de fondo:
body {
background-image: url("your-image-url.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
La propiedad “background-repeat” controla si y cómo se repite la imagen de fondo. Las opciones incluyen “repeat” (repetir tanto horizontal como verticalmente), “repeat-x” (repetir solo horizontalmente), “repeat-y” (repetir solo verticalmente) y “no-repeat” (no repetir).
La propiedad “background-position” controla dónde se coloca la imagen de fondo en el elemento. Se pueden especificar coordenadas x e y o valores como “center”, “top”, “bottom”, “left” y “right”.
La propiedad “background-size” controla el tamaño de la imagen de fondo. Las opciones incluyen “cover” (ajustar la imagen al tamaño del elemento para que cubra todo el elemento), “contain” (ajustar la imagen al tamaño del elemento para que quede completamente dentro del elemento) y valores numéricos en píxeles o porcentajes.
Lee también: Ejemplo de cómo dibujar con CSS y HTML: haz una casa
Juntos, estas tres propiedades pueden ser utilizadas para controlar con precisión el comportamiento de la imagen de fondo en un elemento HTML.
