Propiedades de fondo - parte 2

Posicionamiento con background-position y background-size

Cuando trabajamos con imágenes de fondo en CSS, no solo necesitamos controlar si se repiten o no, sino también dónde se posicionan y qué tamaño ocupan dentro del elemento. Las propiedades background-position y background-size nos permiten controlar estos aspectos con precisión.

Posicionamiento con background-position

La propiedad background-position determina la posición inicial de la imagen de fondo dentro del elemento. Por defecto, las imágenes se colocan en la esquina superior izquierda (0% 0%).

La sintaxis básica es:

.element {
  background-image: url('imagen.jpg');
  background-position: valor-x valor-y;
}

Donde:

• valor-x: Define la posición horizontal
• valor-y: Define la posición vertical

Valores para background-position

Podemos usar diferentes tipos de valores:

• Palabras clave para posiciones predefinidas:

.header {
  background-image: url('banner.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  height: 300px;
}

Las palabras clave disponibles son:

• Horizontal: left, center, right
• Vertical: top, center, bottom

• Valores porcentuales (0% a 100%):

.hero {
  background-image: url('hero.jpg');
  background-repeat: no-repeat;
  background-position: 75% 25%;
  height: 400px;
}

El primer valor (75%) posiciona la imagen al 75% del ancho del elemento desde la izquierda, y el segundo valor (25%) la posiciona al 25% del alto desde arriba.

• Valores en unidades de longitud (px, em, rem):

.icon-box {
  background-image: url('icon.png');
  background-repeat: no-repeat;
  background-position: 20px 50px;
  padding: 60px 20px 20px 80px;
}

Este código posiciona la imagen a 20px desde la izquierda y 50px desde la parte superior.

Ejemplos prácticos de background-position

• Imagen centrada horizontalmente, pegada arriba:

.banner {
  background-image: url('banner.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  height: 200px;
}

• Imagen en la esquina inferior derecha:

.corner-decoration {
  background-image: url('decoration.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  min-height: 300px;
}

• Posicionamiento con valores negativos (para desplazar la imagen fuera del borde visible):

.offset-image {
  background-image: url('large-image.jpg');
  background-repeat: no-repeat;
  background-position: -50px center;
  height: 400px;
}

Control de tamaño con background-size

La propiedad background-size nos permite controlar las dimensiones de la imagen de fondo. Esta propiedad es esencial para crear fondos responsivos y adaptables a diferentes tamaños de pantalla.

La sintaxis básica es:

.element {
  background-image: url('imagen.jpg');
  background-size: valor;
}

Valores para background-size

• auto: Valor predeterminado. La imagen mantiene su tamaño original.

.default-size {
  background-image: url('pattern.jpg');
  background-size: auto;
  height: 300px;
}

• Valores en longitud (px, em, rem) para ancho y alto:

.fixed-size {
  background-image: url('icon.png');
  background-repeat: no-repeat;
  background-size: 50px 50px;
  height: 200px;
}

El primer valor (50px) define el ancho, y el segundo (50px) define el alto.

• Valores porcentuales relativos al contenedor:

.percentage-size {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-size: 100% 50%;
  height: 400px;
}

Este código hace que la imagen ocupe el 100% del ancho y el 50% del alto del elemento.

• cover: Escala la imagen manteniendo su proporción para cubrir completamente el elemento, incluso si parte de la imagen queda recortada.

.cover-background {
  background-image: url('landscape.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 300px;
}

• contain: Escala la imagen manteniendo su proporción para que se ajuste completamente dentro del elemento, sin recortes.

.contain-background {
  background-image: url('logo.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 200px;
}

Combinando background-position y background-size

La combinación de estas dos propiedades nos permite crear efectos visuales más sofisticados:

Imagen de fondo centrada y escalada

.hero-banner {
  background-image: url('hero.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 500px;
}

Este código crea un banner con una imagen que:

• Se centra tanto horizontal como verticalmente
• Se escala para cubrir todo el elemento
• No se repite

Icono pequeño en la esquina

.notification-box {
  background-image: url('notification.svg');
  background-repeat: no-repeat;
  background-position: right 10px top 10px; /* 10px desde la derecha, 10px desde arriba */
  background-size: 24px 24px;
  padding: 15px 40px 15px 15px;
  border: 1px solid #ddd;
}

Este ejemplo coloca un pequeño icono de 24x24px en la esquina superior derecha, a 10px de los bordes.

Efecto parallax simple

.parallax-section {
  background-image: url('mountains.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  height: 400px;
}

La adición de background-attachment: fixed crea un efecto parallax donde la imagen de fondo permanece fija mientras el contenido se desplaza.

Casos de uso prácticos

Imágenes de héroe responsivas

.hero {
  background-image: url('hero-mobile.jpg');
  background-position: center;
  background-size: cover;
  height: 300px;
}

@media (min-width: 768px) {
  .hero {
    background-image: url('hero-desktop.jpg');
    height: 500px;
  }
}

Este código utiliza diferentes imágenes y alturas según el tamaño de la pantalla, manteniendo el posicionamiento y escalado consistentes.

Fondos decorativos que no interfieren con el contenido

.content-box {
  background-image: url('decoration.svg');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 150px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

Este ejemplo coloca una decoración en la esquina inferior derecha sin interferir con el contenido principal.

Tarjetas con imágenes de fondo

.card {
  background-image: url('card-bg.jpg');
  background-position: center;
  background-size: cover;
  color: white;
  padding: 20px;
  border-radius: 8px;
  position: relative;
  z-index: 1;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  z-index: -1;
}

Este código crea una tarjeta con imagen de fondo y una superposición oscura para mejorar la legibilidad del texto.

Técnicas avanzadas

Posicionamiento con 4 valores (CSS moderno)

En CSS moderno, podemos usar una sintaxis más avanzada para background-position:

.advanced-position {
  background-image: url('icon.png');
  background-repeat: no-repeat;
  background-position: right 20px bottom 15px;
  min-height: 200px;
}

Este código posiciona la imagen a 20px desde el borde derecho y a 15px desde el borde inferior.

Múltiples posiciones para imágenes múltiples

Cuando usamos múltiples imágenes de fondo, podemos especificar posiciones individuales:

.multi-background {
  background-image: 
    url('overlay.png'),
    url('pattern.png');
  background-position: 
    center center,
    left top;
  background-repeat: 
    no-repeat,
    repeat;
  background-size: 
    300px auto,
    auto;
  height: 400px;
}

Cada valor corresponde a la imagen en el mismo orden que se declararon.

Consejos prácticos

• Rendimiento: Las imágenes grandes escaladas con background-size pueden afectar el rendimiento. Utiliza imágenes del tamaño adecuado cuando sea posible.

• Accesibilidad: Recuerda que las imágenes de fondo son decorativas. Si la imagen contiene información importante, considera usar un elemento <img> con atributo alt.

• Fallbacks: Siempre proporciona un color de fondo como respaldo:

.hero {
  background-color: #2a3b4c; /* Color de respaldo */
  background-image: url('hero.jpg');
  background-position: center;
  background-size: cover;
}

• Prueba en diferentes dispositivos: El comportamiento de background-size: cover puede variar según el tamaño y la proporción de la pantalla.

Las propiedades background-position y background-size son herramientas fundamentales para crear diseños web modernos y responsivos. Dominando estas propiedades, podrás controlar con precisión cómo se muestran las imágenes de fondo en tus elementos HTML, adaptándolas a diferentes contextos y necesidades de diseño.

Fondos múltiples y shorthand background

CSS nos permite aplicar múltiples imágenes de fondo a un solo elemento y también simplificar nuestro código mediante la propiedad abreviada background. Estas características nos ayudan a crear diseños más complejos y a mantener nuestro código más limpio y eficiente.

Fondos múltiples

Antes de CSS3, solo podíamos aplicar una imagen de fondo a cada elemento. Ahora podemos superponer varias imágenes, creando efectos visuales más elaborados sin necesidad de elementos HTML adicionales.

Para aplicar múltiples fondos, simplemente separamos cada imagen con comas:

.multi-bg {
  background-image: url('foreground.png'), url('middle.png'), url('background.jpg');
}

En este ejemplo, foreground.png se coloca encima, seguido por middle.png y finalmente background.jpg en la capa inferior. Las imágenes se apilan en el orden en que se declaran, con la primera imagen en la parte superior de la pila.

Controlando cada capa individualmente

Podemos controlar cada propiedad de fondo para cada imagen de manera independiente:

.layered-background {
  background-image: url('icon.png'), url('pattern.svg'), url('gradient.jpg');
  background-repeat: no-repeat, repeat, no-repeat;
  background-position: right top, center, center;
  background-size: 50px, auto, cover;
}

En este código:

• icon.png no se repite, se posiciona en la esquina superior derecha y tiene un tamaño de 50px
• pattern.svg se repite, se centra y mantiene su tamaño original
• gradient.jpg no se repite, se centra y cubre todo el elemento

Ejemplos prácticos de fondos múltiples

• Decoración con patrón y logo:

.decorated-header {
  background-image: 
    url('logo.png'),
    url('pattern.png');
  background-repeat: 
    no-repeat,
    repeat;
  background-position: 
    center left 20px,
    center;
  background-size: 
    80px,
    auto;
  padding: 20px 20px 20px 120px;
}

Este código crea un encabezado con un logo en el lado izquierdo y un patrón repetitivo de fondo.

• Efecto de marco decorativo:

.framed-content {
  background-image: 
    url('corner-tl.png'), url('corner-tr.png'),
    url('corner-bl.png'), url('corner-br.png');
  background-repeat: no-repeat;
  background-position: 
    left top, right top,
    left bottom, right bottom;
  padding: 30px;
}

Este ejemplo coloca imágenes de esquinas decorativas en las cuatro esquinas del elemento.

• Superposición de gradiente sobre imagen:

.hero-section {
  background-image: 
    linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7)),
    url('hero.jpg');
  background-size: 
    cover,
    cover;
  background-position: 
    center,
    center;
  color: white;
  padding: 50px 20px;
}

Este código superpone un gradiente oscuro semitransparente sobre una imagen de fondo, mejorando la legibilidad del texto que se coloque encima.

La propiedad shorthand background

La propiedad abreviada background nos permite definir múltiples propiedades de fondo en una sola declaración, lo que hace que nuestro código sea más conciso y fácil de mantener.

La sintaxis básica es:

.element {
  background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size];
}

Ejemplos de uso del shorthand background

• Fondo básico con color e imagen:

.simple-bg {
  background: #f5f5f5 url('pattern.png') repeat;
}

Este código establece un color de fondo gris claro con un patrón que se repite.

• Fondo completo con todas las propiedades:

.complete-bg {
  background: #3498db url('icon.svg') no-repeat center / 50px fixed;
}

Este ejemplo define:

• Color de fondo: #3498db (azul)

• Imagen de fondo: icon.svg

• Repetición: no-repeat

• Posición: center

• Tamaño: 50px

• Attachment: fixed (la imagen permanece fija durante el desplazamiento)

• Usando solo algunas propiedades:

.partial-bg {
  background: url('banner.jpg') top center / cover;
}

Aquí definimos la imagen, posición y tamaño, omitiendo las demás propiedades que tomarán sus valores por defecto.

Shorthand para múltiples fondos

También podemos usar la notación abreviada con múltiples fondos, separándolos con comas:

.multi-shorthand {
  background: 
    url('overlay.png') no-repeat center / 200px,
    #333 url('pattern.svg') repeat;
}

Este código aplica dos capas de fondo:

1. Una imagen overlay.png centrada sin repetición y con un tamaño de 200px
2. Un color de fondo gris oscuro (#333) con un patrón SVG que se repite

Ejemplo práctico: Tarjeta con múltiples fondos usando shorthand

.card {
  background: 
    url('badge.png') no-repeat right 10px top 10px / 30px,
    linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.7)),
    url('texture.jpg') center / cover;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

Este ejemplo crea una tarjeta con:

1. Una insignia en la esquina superior derecha
2. Un gradiente blanco semitransparente para mejorar la legibilidad
3. Una textura de fondo que cubre todo el elemento

Orden y consideraciones importantes

Orden en el shorthand

El orden de las propiedades en la notación abreviada no es estrictamente obligatorio, pero se recomienda seguir este patrón para mayor claridad:

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

Nótese que background-size va después de background-position, separado por una barra diagonal (/).

Consideraciones al usar el shorthand

• Restablecimiento de valores: La propiedad abreviada background restablece todas las propiedades individuales de fondo a sus valores predeterminados si no se especifican. Por ejemplo:

.element {
  background-size: 100px;
  background: url('image.jpg'); /* Esto borra el background-size anterior */
}

• Compatibilidad con navegadores: La sintaxis para background-size en el shorthand (usando /) no es compatible con navegadores muy antiguos. Para máxima compatibilidad, considera usar la propiedad individual:

.compatible {
  background: url('image.jpg') no-repeat center;
  background-size: cover; /* Propiedad separada para mayor compatibilidad */
}

Casos de uso avanzados

Combinando fondos múltiples con pseudo-elementos

Podemos extender aún más nuestras posibilidades combinando fondos múltiples con pseudo-elementos:

.advanced-bg {
  background: url('main-pattern.svg') repeat;
  position: relative;
  z-index: 1;
}

.advanced-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    url('overlay-top.png') no-repeat top / 100%,
    url('overlay-bottom.png') no-repeat bottom / 100%;
  z-index: -1;
}

Este código crea un elemento con un patrón principal y usa un pseudo-elemento para añadir superposiciones en la parte superior e inferior.

Fondos responsivos con media queries

Podemos adaptar nuestros fondos a diferentes tamaños de pantalla:

.responsive-bg {
  /* Fondo para móviles: más simple */
  background: #f5f5f5 url('simple-bg.jpg') center / cover;
}

@media (min-width: 768px) {
  .responsive-bg {
    /* Fondo para tablets y escritorio: más elaborado */
    background: 
      url('decoration-left.png') no-repeat left center / auto 80%,
      url('decoration-right.png') no-repeat right center / auto 80%,
      #f5f5f5 url('detailed-bg.jpg') center / cover;
  }
}

Este ejemplo muestra un fondo simple en dispositivos móviles y un fondo más elaborado con decoraciones laterales en pantallas más grandes.

Consejos prácticos

• Optimización de rendimiento: Cada imagen adicional aumenta el tiempo de carga. Considera combinar imágenes decorativas en sprites o usar SVG cuando sea posible.

• Orden de capas: Planifica cuidadosamente el orden de tus imágenes de fondo, recordando que la primera imagen declarada estará en la parte superior.

• Fallbacks: Proporciona siempre un color de fondo sólido como primera capa para garantizar la legibilidad si las imágenes no se cargan:

.reliable-bg {
  background: 
    #3a3a3a /* Color de respaldo */
    url('main-image.jpg') center / cover;
}

• Mantenibilidad: Para estilos complejos con muchas capas, considera usar propiedades individuales en lugar del shorthand para mejorar la legibilidad del código:

.complex-bg {
  /* Más fácil de leer y mantener que una línea larga de shorthand */
  background-color: #f0f0f0;
  background-image: 
    url('layer1.png'),
    url('layer2.png'),
    url('layer3.png');
  background-repeat: 
    no-repeat,
    repeat-x,
    repeat;
  background-position: 
    center top,
    left center,
    center;
  background-size: 
    300px auto,
    auto 100%,
    cover;
}

Los fondos múltiples y la propiedad shorthand background son herramientas utiles que te permiten crear diseños más sofisticados con menos código HTML. Dominar estas técnicas te ayudará a crear interfaces más ricas visualmente mientras mantienes tu código limpio y eficiente.