Fondos en HTML

Tipos de Fondos

En el diseño web, existen varios tipos de fondos entre los que elegir. Cada tipo ofrece diferentes posibilidades visuales y puede usarse para crear diseños atractivos. Estos son los tres tipos principales de fondos: fondos de color, fondos de imagen y fondos de degradado.

background-image: url('path/to/image.jpg');

Propiedades de fondo

CSS ofrece propiedades para controlar la apariencia y el comportamiento de los fondos. Estas propiedades te permiten establecer el color de fondo, la imagen, la repetición, la posición, el anclaje y el tamaño. Veamos más de cerca cada una de estas propiedades de fondo.

.element {
  background-color: #ff0000; /* Rojo */
}

.element {
  background-image: url('ruta/a/imagen.jpg');
}

.element {
  background-image: url('ruta/a/imagen.jpg');
  background-repeat: no-repeat;
}

.element {
  background-image: url('ruta/a/imagen.jpg');
  background-position: center center;
}

.element { 
  background-image: url('ruta/a/imagen.jpg'); 
  background-attachment: fixed; 
}

Propiedad Abreviada de Fondo

CSS ofrece una forma de establecer múltiples propiedades de fondo en una sola declaración utilizando la propiedad abreviada background. Esta propiedad permite combinar varias propiedades relacionadas con el fondo en una sola declaración, haciendo que tu código sea más legible.

Para usar la propiedad abreviada background, se especifican los valores de las propiedades individuales de fondo en un orden específico. La sintaxis para la propiedad abreviada background es la siguiente:

background: [background-color] [background-image] [background-position] [background-repeat] [background-attachment] [background-size];

body { 
    ...
}

Esto es lo que representa cada valor:

• background-color: El color del fondo del elemento.
• background-image: La URL de la imagen.
• background-position: La posición de la imagen.
• background-repeat: Cómo se repite la imagen.
• background-attachment: Cómo se desplaza la imagen con el contenido.
• background-size: El tamaño de la imagen.

Al usar esta propiedad abreviada, puedes omitir cualquier valor si no deseas establecerlo. Sin embargo, mantén su orden consistente.

.element {
  background: #f2f2f2 url('path/to/image.jpg') center no-repeat fixed;
}

body { 
    ...
}

En este ejemplo:

• #f2f2f2 establece un color gris claro para el fondo.
• 'path/to/image.jpg' establece una URL de imagen para el fondo.
• center la posiciona en el centro de su elemento.
• no-repeat significa que no se repite.
• fixed significa que permanece fija mientras el contenido se desplaza.

Usar esta abreviatura puede ayudarte a escribir código CSS más conciso. Es útil cuando se establecen múltiples fondos para un elemento en una sola línea.

Si más tarde quieres cambiar solo una propiedad individual después de usar esta abreviatura, necesitarás volver a especificar todos los demás valores también. Alternativamente, usa propiedades individuales para apuntar a aspectos específicos sin afectar a otros.

Múltiples Fondos

CSS permite superponer varios fondos en un solo elemento. Al especificar múltiples imágenes y colores de fondo, puedes lograr efectos visuales sin necesidad de elementos HTML adicionales.

Para aplicar múltiples fondos a un elemento, usa la propiedad background o las propiedades individuales de fondo, separando cada fondo con una coma.

.element {
  background: url('image1.jpg') center no-repeat,
              url('image2.jpg') top left repeat,
              linear-gradient(to bottom, #fff, #000);
}

1. image1.jpg se posiciona en el centro y no se repite.
2. image2.jpg se posiciona en la esquina superior izquierda y se repite.
3. Se aplica un degradado lineal de blanco a negro como tercer fondo.

Los fondos se superponen uno encima del otro, siendo el primer fondo especificado la capa superior y el último fondo especificado la capa inferior.

También puedes combinar colores de fondo con imágenes:

.element {
  background: url('image.jpg') center no-repeat,
              #ff0000;
}

En este caso, el color rojo (#ff0000) será visible en las áreas donde la imagen sea transparente o no cubra todo el elemento.

Al usar múltiples fondos, puedes controlar la posición, repetición y tamaño de cada uno por separado:

.element {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-position: center, top right;
  background-repeat: no-repeat, repeat-x;
  background-size: cover, contain;
}

• image1.jpg está centrada, no se repite y cubre todo el elemento.
• image2.jpg está posicionada en la esquina superior derecha; se repite horizontalmente; se ajusta dentro del elemento manteniendo su proporción.

Al superponer múltiples fondos como muestran estos ejemplos, puedes crear diseños atractivos que combinan imágenes, colores y degradados. Experimenta con diferentes combinaciones y propiedades para lograr el efecto deseado en tu página web.

Transparencia de fondo

CSS ofrece formas de crear fondos transparentes usando valores de color RGBA o HSLA. Esto permite controlar la opacidad del fondo, haciéndolo parcial o totalmente transparente.

Para crear un fondo transparente usando RGBA:

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

De manera similar, puedes usar HSLA para crear fondos transparentes:

.element {
  background-color: hsla(0, 100%, 50%, 0.5);
}

Al ajustar el valor alfa, puedes controlar qué tan transparente será tu color de fondo. Esto ayuda cuando quieres crear superposiciones o mostrar contenido debajo de un elemento.

<div class="overlay">
  <h1>Bienvenido</h1>
  <p>Este es un texto sobre un fondo transparente.</p>
</div>

<style>
.overlay {
    background-color: rgba(0, 0, 0, .7);
    color: #fff;
    padding: 20px;
}
</style>

Al usar fondos transparentes, piensa en qué tan fácil será para las personas leer tu texto. Elige buenos colores y tamaños de fuente para que haya suficiente contraste con tu fondo. Los fondos transparentes son útiles para crear diseños agradables y superposiciones mientras muestras el contenido subyacente. Al controlar la transparencia con valores RGBA o HSLA, obtienes justo la cantidad correcta de efecto transparente en tus diseños.

Ejemplos y Demostraciones

Aquí hay algunos ejemplos prácticos del uso de fondos en diseño web. Estos fragmentos de código y demostraciones en vivo muestran cómo puedes usar diferentes tipos de fondos y propiedades para crear diseños atractivos.

<section class="section-1">
  <h2>Sección 1</h2>
  <p>Esta sección tiene un fondo azul.</p>
</section>

<section class="section-2">
  <h2>Sección 2</h2>
  <p>Esta sección tiene un fondo verde.</p>
</section>

<style>
.section-1 {
  background-color: #2196F3;
  color: #fff;
  padding: 20px;
}

.section-2 {
  background-color: #4CAF50;
  color: #fff;
  padding: 20px;
}
</style>

<section class="hero">
   <h1>Bienvenido a Mi Sitio Web</h1>
   <p>Esta es una sección de héroe con una imagen de fondo.</p>
</section>

<style>
.hero {
   background-image: url('ruta/a/imagen-hero.jpg');
   background-size: cover;
   background-position: center;
   height: 400px; 
   display: flex; 
   justify-content: center; 
   align-items: center; 
   color: #fff; 
   text-align: center;
}
</style>  

<section class="gradient-section">
  <div class="overlay">
    <h2>Sección Degradada</h2>
    <p>Esta sección tiene fondos degradados con superposiciones transparentes.</p>
  </div>
</section>

<style>
.gradient-section {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
  padding: 50px;
}
.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 20px;
  color: #fff;
  text-align: center;
}
</style>