() translation by (you can also view the original English article)
En este tutorial vamos a hablar sobre una de las mas viejas, mas familiares, propiedades CSS: background background es una de las muchas propiedad CSS cuyas características son pasadas por alto. De hecho, tuvo una mejora con CSS3, recibiendo nuevas capacidades ademas de solo agregar una imagen de fondo o color. Veamos algunas de ellas.
Retallo de posición del fondo
Posicionar la imagen de fondo es simple y algo con lo que ya eres familiar. Si queremos posicionar el fondo en la esquina inferior derecha del elemento, usamos bottom right en background-position Por ejemplo:
1 |
#workspace { |
2 |
width: 100%; |
3 |
max-width: 668px; |
4 |
height: 400px; |
5 |
background-color: #525d62; |
6 |
background-image: url(images/macbook.png); |
7 |
background-repeat: no-repeat; |
8 |
background-position: right bottom; |
9 |
}
|
O, abreviado, background, luego de la definición del url:
1 |
#workspace { |
2 |
width: 100%; |
3 |
max-width: 668px; |
4 |
height: 400px; |
5 |
background: #525d62 url(images/macbook.png) no-repeat right bottom; |
6 |
}
|
Desde la llegada de CSS3 hemos sido capaces de especificar la position del retallo; las distancias precisas sobre la posición del set. Tomando nuestro ejemplo de bottom right, incluimos bottom 20px right 30px para posicionar el fondo a 20px del border inferior y 30px del border izquierdo.
1 |
#workspace { |
2 |
width: 100%; |
3 |
max-width: 668px; |
4 |
height: 400px; |
5 |
background-color: #525d62; |
6 |
background-image: url(images/macbook.png); |
7 |
background-repeat: no-repeat; |
8 |
background-position: right 30px bottom 20px; |
9 |
}
|
Las posiciones (bottom, top, right, left) pueden ser definidas en cualquier orden, pero la longitud del desplazamiento debe ser definida después de cada posición del fondo.
Los créditos son para Metin Kazan por las ilustraciones.
2. Múltiples Imágenes de Fondo
La propiedad background también nos permite añadir múltiples imágenes de fondo. Además, vamos a ampliar nuestro ejemplo anterior con más cosas e ingenios.
Añadimos estas imágenes a un solo background o a través de la declaración background-image para separar cada una con una coma. Usamos la propiedad background-position, la cual también acepta múltiples valores para controlar cada una de esas imágenes de fondo.
1 |
#workspace { |
2 |
height: 400px; |
3 |
background-color: #525d62; |
4 |
background-image: |
5 |
url(images/macbook.png), |
6 |
url(images/mouse.png), |
7 |
url(images/hdd.png), |
8 |
url(images/phone.png), |
9 |
url(images/ipad.png), |
10 |
url(images/coffee.png), |
11 |
url(images/camera.png); |
12 |
background-repeat: no-repeat; |
13 |
background-position: |
14 |
50% 50%, /* macbook.png */ |
15 |
75% 295px, /* mouse.png */ |
16 |
75% 230px, /* hdd.png */ |
17 |
96% 240px, /* phone.png */ |
18 |
20% 250px, /* ipad.png */ |
19 |
22% 190px, /* coffee.png */ |
20 |
7% 280px; /* camera.png */ |
21 |
}
|
Podemos usar unidades fijas (como pixeles) o unidades flexibles (como los porcentajes) o una combinación de las dos.
Cada par de valores representa las coordenadas desde la esquina superior izquierda del elemento contenedor hasta la esquina superior izquierda de la imagen. Por ejemplo, la esquina superior izquierda de la cámara de la imagen es 280px desde la parte superior del contenedor, luego 7% de la anchura disponible hacia el otro lado desde la izquierda.
Nota: La anchura disponible es el total de anchura del elemento contenedor, menos la anchura de la imagen de fondo. Por lo tanto, una imagen de fondo ubicada 50% en el eje x aparecerá exactamente centrada.
Movimiento
Asimismo, ya que background-position es una propiedad que se puede llegar a animar, podemos crear un fondo más atractivo y más animado.
1 |
#workspace { |
2 |
width: 600px; |
3 |
height: 400px; |
4 |
background-color: #525d62; |
5 |
background-repeat: no-repeat; |
6 |
background-image: |
7 |
url(images/macbook.png), |
8 |
url(images/mouse.png), |
9 |
url(images/hdd.png), |
10 |
url(images/phone.png), |
11 |
url(images/ipad.png), |
12 |
url(images/coffee.png), |
13 |
url(images/camera.png); |
14 |
background-position: |
15 |
50% 50%, |
16 |
430px 295px, |
17 |
425px 230px, |
18 |
480px 240px, |
19 |
105px 250px, |
20 |
120px 190px, |
21 |
40px 280px; |
22 |
animation: 3s ease 0s inView forwards; |
23 |
}
|
24 |
@keyframes inView { |
25 |
0% { |
26 |
background-position-y: 600%, 451px, -448px, 240px, 496px, -44px, 280px; |
27 |
background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; |
28 |
}
|
29 |
20% { |
30 |
background-position-y: 50%, 451px, -448px, 240px, 496px, -44px, 280px; |
31 |
background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; |
32 |
}
|
33 |
30% { |
34 |
background-position-y: 50%, 295px, -448px, 240px, 496px, -44px, 280px; |
35 |
background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; |
36 |
}
|
37 |
40% { |
38 |
background-position-y: 50%, 295px, 230px, 240px, 250px, -44px, 280px; |
39 |
background-position-x: 50%, 75%, 75%, 200%, 0%, 22%, -100%; |
40 |
}
|
41 |
50% { |
42 |
background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; |
43 |
background-position-x: 50%, 75%, 75%, 96%, 0%, 22%, -100%; |
44 |
}
|
45 |
60% { |
46 |
background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; |
47 |
background-position-x: 50%, 75%, 75%, 96%, 0%, 22%, 7%; |
48 |
}
|
49 |
100% { |
50 |
background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; |
51 |
}
|
52 |
}
|
Aquí hemos ajustado un número de fotogramas en una línea de tiempo. En cada fotograma hemos alterado los valores de background-position-x y background-position-y de cada imagen de fondo. Por supuesto, la animación es ciertamente rudimentaria, ¡así que por favor amablemente le pido que tome CodePen y lo mejore!
Nota: Haga clic en Rerun en la parte inferior derecha de la pluma para ver la animación.
Aprenda más sobre las animaciones CSS
CSS AnimaciónUna introducción para principiantes a la animación con CSS
AnimaciónAñadiendo Interés de Sus Animaciones en la Web
AnimaciónFirme la Línea Punteada: Animado Su Propia Firma SVG
Un Par de Puntos Significativos
Los fondos que usamos están ordenados de forma secuencial, el primero en la lista aparecer en la parte de arriba del orden, mientras que el último en la lista aparecerá al fondo del orden de los fondos.
1 |
#workspace { |
2 |
width: 600px; |
3 |
height: 400px; |
4 |
background-color: #525d62; |
5 |
background-image: |
6 |
url(images/macbook.png), |
7 |
url(images/mouse.png), |
8 |
url(images/hdd.png), |
9 |
url(images/phone.png), |
10 |
url(images/ipad.png), |
11 |
url(images/coffee.png), |
12 |
url(images/camera.png); /* stacked at the bottom */ |
13 |
background-repeat: no-repeat; |
14 |
}
|
Todas las sub-propiedades de background (background-repeat, background-size, background-repeat, etc.) pueden ser definidas varias veces, excepto background-color. Si aplicamos múltiples fondos usando la abreviatura de la propiedad background, entonces defina el color de fondo como el último valor que va a tomar efecto. Por ejemplo:
1 |
#workspace { |
2 |
height: 400px; |
3 |
background: |
4 |
url(images/macbook.png) 50% 50% no-repeat, |
5 |
url(images/mouse.png) 430px 295px no-repeat, |
6 |
url(images/camera.png) 425px 230px no-repeat #525d62; |
7 |
}
|
De manera alternativa, añada un background-color separado, posterior a la propiedad corta:
1 |
#workspace { |
2 |
width: 600px; |
3 |
height: 400px; |
4 |
background: |
5 |
url(images/macbook.png) 50% 50% no-repeat, |
6 |
url(images/mouse.png) 430px 295px no-repeat, |
7 |
url(images/camera.png) 425px 230px no-repeat; |
8 |
background-color: #525d62; |
9 |
}
|
Los dos códigos hacen los mismo, pero yo encuentro que el último es más intuitivo e interesante.
3. Fusionar Imágenes de Fondo
La propiedad background-blend-mode hace lo mismo que usted encontrará en las aplicaciones como Photoshop o Gimp, ésta mezcla las imágenes de fondo con otra, así como también con lo que sea que esté debajo.
La propiedad background-blend-mode toma ciertos valores familiares tales como overlay y multiply entre algunos otros con los cuales Jonathan Cutrell hace un trabajo fantástico de explicación en su tutorial sobre ese tema. Recomiendo que lea su artículo para que podamos pasar a ver algunos ejemplos prácticos.
Hay varias maneras de usar el Modo de Mezcla CSS para crear diseños sorprendentes, tales como mezclando un degradado con una imagen, el cual Ian Yates señala en su inspirador resumen.
Para crear este efecto, añadamos una imagen de fondo y un degrado y apliquemos el modo de mezcla overlay.
1 |
#blend { |
2 |
background-repeat: no-repeat; |
3 |
background-image: url( 'img/people-15.jpg' ), |
4 |
linear-gradient(135deg, rgba(175,0,79,1) 0%,rgba(255,114,187,1) 100%); |
5 |
background-blend-mode: overlay; |
6 |
}
|
Overlay impacta a los dos fondos que hemos mencionado aquí, así que podría necesitar ser prudente si no quiere que todo se mezcle. Si queremos evitar que todo se mezcle con el color de fondo, ajuste el segundo valor a normal el cual aplicará a nuestra segunda imagen de fondo.
1 |
#blend { |
2 |
background-repeat: no-repeat; |
3 |
background-image: url( '../img/people-15.jpg' ), |
4 |
linear-gradient(135deg, rgba(175,0,79,1) 0%,rgba(255,114,187,1) 100%); |
5 |
background-color: yellow; |
6 |
background-blend-mode: overlay, normal; |
7 |
}
|
4. Recortando el Fondo
La propiedad background-clip es una utilidad que controla cómo el color de fondo y la imagen se cruzan dentro del modelo de contenido de caja CSS. De forma similar, la propiedad box-sizing y la propiedad background-clip ocupan tres valores válidos llamados:
-
border-boxes un valor por defecto que expande la imagen de fondo o el color por todo el trayecto hasta el borde exterior del elemento. -
padding-boxexpandirá el fondo arriba del borde exterior del padding, o en otras palabras, el borde interior del borde. -
content-boxpreservará el fondo dentro del elemento contenido como se muestra debajo:
Un ejemplo practico donde hemos encontrado que la propiedad background-clip es útil es cuando tengo creado un botón con un icono, usando un solo elemento. En la siguiente demostración, nuestra imagen se expandirá desde el borde izquierdo hasta la derecha del elemento, incluso, si añadimos padding en cada lado, ya que éste todavía aplica border-box.
Si queremos envolver el icono con un poco de espacio en blanco, por lo general, tendríamos que envolverlo en otro elemento y aplicar un padding en ese elemento extra. Usando la propiedad background-clip, podemos hacer esto de manera elegante al configurar esto a través de la propiedad content-box y sustituyendo el padding con bordes del mismo color como el color de fondo.
Resumiendo
La propiedad background es una que usamos con frecuencia en nuestros proyectos. Por fortuna, este artículo le ha recordado de su amplia variedad de usos, y espero escuchar más ideas en los comentarios.
Una nota final: los navegadores que tienen soporte para estas propiedades (con la excepción de background-blend-mode son magníficas. De acuerdo a CanIUse, la opción de múltiples fondos tiene soporte desde Internet Explorer 9 en adelante con tan sólo un par de problemas triviales. Las opciones de imagen de fondo, tales como la propiedad background-clip, está disponible casi para todos.
Las opciones de mezcla, al momento de escribir este artículo, funcionaban mejor en Chrome, Opera y son, parcialmente, aplicables en Safari debido a algunos errores, pero lamentablemente parece no haber hecho ningún progreso con Microsoft Edge.
