CSS - Fondos

Propiedades de fondo

background-color: red;

background-color: rgb(255, 0, 0);

background-color: #ff0000;

background-color: hsl(0, 100%, 50%);

background-color: rgba(255, 0, 0, 0.5);

background-image: url('imagen.jpg');

background-image: url('imagen1.jpg'), url('imagen2.jpg');

background-repeat: no-repeat;

background-attachment: fixed;

background-position: top right;

background-position: 50% 50%;

background-position: 100px 200px;

background-size: 200px 300px;

background-size: 50% 50%;

background-origin: border-box;

background-clip: padding-box;

Propiedad Abreviada de Fondo

La propiedad abreviada background te permite establecer múltiples propiedades de fondo en una sola declaración. Esto puede hacer que tu código CSS sea más corto y fácil de leer.

El orden de los valores en la propiedad abreviada es:

background: <background-color> <background-image> <background-repeat> <background-attachment> <background-position> / <background-size>;

Puedes combinar estas propiedades de fondo:

background-color: #ff0000;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;

En una sola declaración abreviada:

background: #ff0000 url('image.jpg') no-repeat fixed center / cover;

Ten en cuenta que el valor de background-size está separado del valor de background-position por una barra diagonal (/).

Al usar la propiedad abreviada, cualquier valor omitido se establecerá en su valor predeterminado. Si deseas que todas las propiedades de fondo se establezcan explícitamente, incluye todos los valores necesarios en la declaración abreviada.

El uso de la propiedad abreviada background puede ayudar a simplificar tu código CSS y hacerlo más fácil de mantener. Sin embargo, si solo necesitas establecer una o dos propiedades de fondo, puede ser más legible usar propiedades individuales en lugar de la abreviada.

Múltiples Fondos

CSS permite superponer varias imágenes de fondo en un solo elemento. Esta técnica puede crear efectos visuales interesantes y añadir profundidad a tus diseños.

Para especificar múltiples imágenes de fondo, puedes usar una lista de valores de imágenes de fondo separados por comas en la propiedad background-image o en la propiedad abreviada background.

.element {
  background-image: url('image1.jpg'), url('image2.jpg');
}

También puedes combinar múltiples imágenes de fondo con otras propiedades. Al usar la propiedad abreviada background, los valores para cada capa se separan por comas.

.element {
  background: url('image1.jpg') no-repeat center, 
              url('image2.jpg') repeat-x top;
}

Además, puedes especificar diferentes tamaños, posiciones y otras propiedades para cada capa.

.element {
  background: url('image1.jpg') no-repeat center/cover,
              url('image2.jpg') repeat-x top/50% auto;
}

Al usar múltiples fondos, la primera imagen especificada estará en la parte superior. Las imágenes siguientes se colocarán debajo en el orden en que se declaran.

Los múltiples fondos te dan opciones para crear diseños visualmente ricos usando CSS. Experimenta con diferentes combinaciones de imágenes, posiciones, tamaños y otras propiedades para lograr los efectos deseados.

Degradados de fondo

CSS permite crear transiciones de color conocidas como degradados para fondos. Puedes crear degradados lineales o radiales sin usar archivos de imagen, lo que resulta en tiempos de carga más rápidos.

Para crear un degradado lineal, usa la función linear-gradient() como valor para la propiedad background o background-image. Especifica la dirección del degradado y los colores entre los que quieres hacer la transición.

.element {
  background: linear-gradient(to right, red, blue);
}

Esto crea un degradado que transiciona de rojo en la izquierda a azul en la derecha. Puedes especificar la dirección usando palabras clave como to top, to bottom, to left, to right, o un ángulo en grados.

Los puntos de color controlan dónde ocurre cada transición de color. Por defecto, las transiciones están espaciadas uniformemente, pero puedes especificar porcentajes o longitudes para controlar sus posiciones.

.element {
  background: linear-gradient(to right, red 0%, blue 50%, green 100%);
}

Para crear un degradado radial, usa la función radial-gradient(). Especifica la posición central, la forma (círculo o elipse), y los puntos de color.

.element {
  background: radial-gradient(circle at center, red, blue);
}

Esto crea un degradado circular centrado dentro del elemento que transiciona de rojo en el centro a azul en los bordes.

Puedes crear degradados más complejos especificando múltiples puntos de color y usando transparencia.

.element {
  background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
}

Los degradados se pueden combinar con otras propiedades de fondo como background-size y background-repeat para crear varios efectos.

.element { 
  background: repeating-linear-gradient(45deg, red, blue 10%);
} 

Los degradados CSS proporcionan una forma de crear fondos visualmente atractivos sin depender de archivos de imagen. Experimenta con diferentes colores, direcciones y puntos de color para lograr los efectos deseados.

Mezcla de Fondos

La propiedad background-blend-mode en CSS te permite mezclar imágenes de fondo y colores dentro de un elemento. Esto crea efectos visuales combinando múltiples fondos usando diferentes modos de mezcla.

Los modos de mezcla disponibles son:

• normal: El modo predeterminado; no se aplica ninguna mezcla.
• multiply: Multiplica el color de fondo con la imagen, resultando en un efecto más oscuro.
• screen: Multiplica el inverso del color de fondo con la imagen, resultando en un efecto más claro.
• overlay: Aplica una combinación de multiply y screen basado en el color de fondo.
• darken: Selecciona los valores de color más oscuros de la imagen y el color de fondo.
• lighten: Selecciona los valores de color más claros de la imagen y el color de fondo.

Otros modos de mezcla incluyen: color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, y luminosity.

Para usar la mezcla de fondos, aplica múltiples fondos a un elemento y luego especifica el modo de mezcla deseado con la propiedad.

.element {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-blend-mode: multiply;
}

También puedes mezclar imágenes con colores.

.element {
  background: url('image.jpg'), #ff0000;
  background-blend-mode: screen;
}

Si tienes múltiples fondos, puedes especificar múltiples modos para cada capa.

.element {
  background: url('image1.jpg'), url('image2.jpg'), #ff0000;
  background-blend-mode: multiply, overlay;
}

La mezcla de fondos abre muchas posibilidades creativas para combinar imágenes y colores. Experimentar te ayudará a lograr los efectos deseados.

Opacidad del fondo

La opacidad de los colores y las imágenes de fondo en CSS se puede controlar usando la propiedad opacity o utilizando valores de color RGBA o HSLA.

La propiedad opacity establece la opacidad general de un elemento, incluyendo su contenido y fondo. Toma un valor entre 0 (completamente transparente) y 1 (completamente opaco).

.element {
  background-color: #ff0000;
  opacity: 0.5;
}

Sin embargo, usar la propiedad opacity afecta a todo el elemento, incluyendo su contenido. Si solo quieres controlar la opacidad del color o imagen de fondo sin afectar al contenido, puedes usar valores de color RGBA o HSLA.

RGBA significa Rojo, Verde, Azul, Alfa; donde alfa representa la opacidad. HSLA significa Tono, Saturación, Luminosidad, Alfa; donde alfa cumple la misma función.

.element {
  background-color: rgba(255, 0, 0, 0.5);
}

También puedes usar valores de color RGBA o HSLA con imágenes de fondo.

.element {
  background-image: linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)), 
                    url('image.jpg');
}

Usar RGBA o HSLA te permite controlar la transparencia independientemente del contenido, proporcionando flexibilidad para crear diseños visualmente interesantes.

Patrones de fondo

Los patrones de fondo añaden textura e interés visual a tus páginas web. Puedes crear patrones de fondo repetitivos usando imágenes pequeñas y técnicas de CSS para una repetición sin costuras.

Para crear un patrón de fondo repetitivo, comienza seleccionando o creando una imagen pequeña que pueda ser dispuesta en mosaico sin problemas. La imagen debe tener bordes que coincidan cuando se repita horizontal y verticalmente.

.element {
  background-image: url('pattern.png');
  background-repeat: repeat;
}

.element {
  background-image: url('pattern.png');
  background-repeat: repeat-x;
}

.element {
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
                    url('pattern.png');
  background-repeat: repeat;
}

Imágenes de fondo adaptables

El diseño web adaptable ofrece experiencias óptimas para los usuarios en diferentes dispositivos. Usar imágenes de fondo adaptables implica proporcionar tamaños y resoluciones de imagen apropiados según el tamaño de pantalla del espectador.

Una técnica es servir diferentes archivos de imagen según el tamaño de pantalla del dispositivo. Puedes definir múltiples propiedades background-image usando media queries.

.element {
  background-image: url('small-image.jpg');
}

@media (min-width: 768px) {
  .element {
    background-image: url('medium-image.jpg');
  }
}

@media (min-width: 1200px) {
  .element {
  background-image: url('large-image.jpg');
  }
}

.element {
  background-image: image-set(
    url('image-1x.jpg') 1x,
    url('image-2x.jpg') 2x
  );
}

.element {
  background-image: linear-gradient(to right, #ff0000, #0000ff);
}

.element {
  background-image: url('pattern.svg');
}