1.1 Propiedad background-color
La propiedad background-color establece el color de fondo para un elemento. Permite aplicar un color de relleno al fondo,
proporcionando una separación visual del contenido y mejorando la percepción del texto y otros elementos.
Valores:
- Nombres de colores: puedes utilizar nombres de colores predefinidos como
red,blue,green - Valores hexadecimales: por ejemplo,
#ff0000,#00ff00,#0000ff - RGB: por ejemplo,
rgb(255, 0, 0),rgb(0, 255, 0),rgb(0, 0, 255) - RGBA: por ejemplo,
rgba(255, 0, 0, 0.5)(rojo semitransparente) - HSL: por ejemplo,
hsl(0, 100%, 50%),hsl(120, 100%, 50%),hsl(240, 100%, 50%) - HSLA: por ejemplo,
hsla(0, 100%, 50%, 0.5)(rojo semitransparente).
Ejemplo de uso:
.color-red {
background-color: red;
}
.color-hex {
background-color: #3498db;
}
.color-rgba {
background-color: rgba(46, 204, 113, 0.7);
}
<body>
<div class="color-red">Este elemento tiene un fondo rojo.</div>
<div class="color-hex">Este elemento tiene un fondo con un color especificado en formato hexadecimal.</div>
<div class="color-rgba">Este elemento tiene un fondo verde semitransparente.</div>
</body>
Explicación del código:
background-color: red;: establece un fondo rojo para el elementobackground-color: #3498db;: establece el color de fondo utilizando un valor hexadecimalbackground-color: rgba(46, 204, 113, 0.7);: establece un fondo verde semitransparente utilizando RGBA
1.2 Propiedad background-image
La propiedad background-image establece una imagen de fondo para un elemento. Permite utilizar imágenes para
crear fondos visualmente atractivos, mejorando el diseño y la percepción de la página web.
Como valor, necesitas pasar la URL de la imagen — especificar la ruta a la imagen que se utilizará
como fondo. Por ejemplo, url('image.jpg').
Ejemplo de uso:
.background-url {
background-image: url('https://via.placeholder.com/150');
width: 150px;
height: 150px;
border: 1px solid #000;
}
<body>
<div class="background-url">Este elemento tiene una imagen de fondo.</div>
</body>
Explicación del código:
background-image: url('https://via.placeholder.com/150');: establece una imagen como fondo para el elemento. En este caso se utiliza la URL de la imagen
Ventajas de usar background-image:
- Atractivo visual: usar imágenes de fondo permite crear páginas web más visualmente atractivas e interesantes.
- Contexto: las imágenes de fondo pueden proporcionar contexto adicional o información, mejorando la percepción visual del contenido de la página.
- Branding: las imágenes de fondo pueden ser parte del branding, ayudando a mantener un estilo cohesivo y reconocimiento del sitio.
Consejos para usar imágenes de fondo:
- Optimización de imágenes: para mejorar el rendimiento de la página, es importante optimizar las imágenes, reduciendo su tamaño sin pérdida significativa de calidad
- Compatibilidad entre navegadores: asegúrate de que las imágenes utilizadas se muestren correctamente en todos los navegadores objetivo
- Texto alternativo: para las imágenes que son significativas, se deben prever formas alternativas de transmitir información, como descripciones en texto, para usuarios con discapacidades
1.3 Uso combinado de background-color y background-image
Las propiedades background-color y background-image pueden utilizarse juntas para crear fondos complejos y atractivos.
Por ejemplo, se puede establecer un color de fondo que será visible en caso de que la imagen de fondo no se cargue, o
usar un fondo de color junto con una imagen semitransparente.
Ejemplo de uso:
.combined-background {
background-color: #3498db;
background-image: url('https://via.placeholder.com/150');
width: 300px;
height: 300px;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid #000;
}
<body>
<div class="combined-background">
Este elemento tiene un fondo combinado con una imagen y un fondo de color.
</div>
</body>
Explicación del código:
background-color: #3498db;: establece el color de fondobackground-image: url('https://via.placeholder.com/150');: establece una imagen de fondowidth: 300px;height: 300px;: establece el tamaño del elementocolor: white;: establece el color del texto para mejorar la legibilidad sobre el fondodisplay: flex;align-items: center;justify-content: center;text-align: center;: centra el texto dentro del elementoborder: 1px solid #000;: añade un borde alrededor del elemento para resaltarlo visualmente
GO TO FULL VERSION