Clase 11 · Background-image
Con background-image ponemos imágenes de fondo y las controlamos con background-position, background-repeat y background-size. Vemos también cómo combinar color e imagen, usar varias imágenes, animarlas con :hover, crear degradados, fusionar imágenes con background-blend-mode, fijar el fondo con background-attachment, un caso práctico paso a paso y un caso práctico más (centrar con flex y padding).
Background-image
Nos permite poner una imagen de fondo indicando la ruta donde está guardada la imagen.
.fondo{
background-image: url("img/mi-imagen.jpg");
}La ruta de url() es relativa al archivo CSS (o al HTML si el CSS está dentro de él). En la demo se usa la imagen de la luna de esta clase.
Background-position
Define la posición de la imagen de fondo. Posiciones definidas:
centerleftrighttopbottom
.fondo{
background-image: url("img/mi-imagen.jpg");
background-position: center;
}Background-position en X y en Y
Podemos posicionar una imagen tanto en horizontal (X) como en vertical (Y). Si utilizamos 2 valores en la misma línea, el primero pertenece a X y el segundo a Y.
Podemos usar:
- Valores definidos (
top,bottom,center,left,right) - Píxeles (
px) - Porcentaje (
%)
.fondo{
background-image: url("img/mi-imagen.jpg");
background-position: top center;
}
.fondo{
background-image: url("img/mi-imagen.jpg");
background-position: top 25%;
}
.fondo{
background-image: url("img/mi-imagen.jpg");
background-position: 20px 50%;
}Background-repeat
Define si el fondo se repite y cómo se repite. Podemos definir:
- Que no se repita (
no-repeat) - Que se repita (
repeat) - Que se repita horizontalmente, en X (
repeat-x) - Que se repita verticalmente, en Y (
repeat-y)
.fondo{
background-image: url("img/mi-imagen.jpg");
background-position: top center;
background-repeat: no-repeat;
}
.fondo{
background-image: url("img/mi-imagen.jpg");
background-position: top 25%;
background-repeat: repeat;
}
.fondo{
background-image: url("img/mi-imagen.jpg");
background-position: 20px 50%;
background-repeat: repeat-x;
}
.fondo{
background-image: url("img/mi-imagen.jpg");
background-position: 20px 50%;
background-repeat: repeat-y;
}Background-size
Define el tamaño de la imagen de fondo. Propiedades:
- Tamaño:
pxo%(eje X + eje Y). - Cover: ocupa todo el espacio del contenedor.
- Contain: coloca la imagen entera dentro del contenedor independientemente de su tamaño.
.fondo{
width:800px;
height:400px;
background-image: url("moon.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
background-size: cover;
background-size: 200px 80px;
background-size: 50% 450px;Background: color + image
La propiedad background-color y background-image pueden funcionar a la vez. La imagen se coloca en una «capa» superior al color de fondo.
background-color: red;
background-image: url("moon.jpg");
background-repeat: no-repeat;
background-size: 250px;
background-position: center center;Background: más de una imagen de fondo
Podemos separar por comas cada imagen que queramos añadir. Las propiedades repeat, size y position también las podemos separar por comas siguiendo el mismo orden que las imágenes.
background:url("mobile-01.png"), url("moon.jpg"), url("conexion-alpha.jpg");
background-color: red;
background-repeat: no-repeat;
background-size: 200px 200px, 200px 200px, cover;
background-position: top left, top center, center center;
transition:0.6s;Orden de las imágenes
Las imágenes se van colocando como si fuera por «capas». La primera imagen del código es la capa frente, la segunda la capa medio y la última es la de más al fondo.
background:url("mobile-01.png"), url("moon.jpg"), url("conexion-alpha.jpg");
background-color: red;
background-repeat: no-repeat;
background-size: 200px 200px, 200px 200px, cover;
background-position: top left, top center, center center;
transition:0.6s;
Background-image + hover
Podemos cambiar las propiedades de tamaño y posición cuando nos ponemos encima del fondo con .fondo:hover.
- Ejem1 · hacer zoom en una imagen de fondo.
- Ejem2 · mover de izquierda a derecha una imagen de fondo.
.fondo{
background-repeat: no-repeat;
background-size: 100%;
background-position: center center;
transition:0.6s;
}
.fondo:hover{
background-size: 120%;
transition:0.6s;
}.fondo{
background-repeat: no-repeat;
background-size: 100%;
background-position: left center;
transition:0.6s;
}
.fondo:hover{
background-position: right center;
transition:0.6s;
}Pasa el cursor sobre cada caja.
En la demo de Ejem2 la imagen se reduce (background-size: 60%) para que quede espacio y se vea el desplazamiento; con 100% de ancho la imagen ocupa toda la caja en horizontal y solo podría moverse en vertical.
Background-image degradado
Generaremos nuestros gradientes desde la siguiente web: cssgradient.io.
.fondo{
background: rgb(238,174,202);
background: linear-gradient(0deg, rgba(238,174,202,1) 0%, rgba(184,134,48,1) 13%,
rgba(209,233,148,0.8204014027485994) 100%);
}Background-blend-mode
Esta opción sirve para cuando tenemos 2 imágenes de fondo: es el modo de fusión entre ellas, como el que podemos tener en Photoshop. Opciones:
multiplyscreenoverlaydarkenlightencolor-dodgesaturationcolorluminosity
.fondo{
background-image: url("img/mobile-01.png"), url("img/conexion-alpha.jpg");
background-blend-mode: multiply;
}Background-attachment
Esta opción sirve para definir cómo queremos que se posicione la imagen de fondo. Lo vamos a apreciar cuando la página tenga scroll, con movimiento vertical. Opciones:
- Scroll (comportamiento por defecto): la imagen de fondo se mueve cuando hacemos scroll.
- Fixed: la imagen de fondo se queda anclada al fondo. Para ello la imagen debe ser más grande, tener más altura que el contenedor; cuando hacemos scroll nos va mostrando diferentes partes de la imagen, actúa como una máscara.
background-image: url("img/road.jpg");
background-size: cover;
background-attachment: fixed;Explicación: background-attachment: fixed
Definimos las dimensiones de nuestro <div> contenedor:
width:100%;
height:450px;Con background-size: cover; hacemos que la imagen ocupe todo nuestro contenedor; recorta la imagen porque nuestro fondo tiene más altura.
Con background-attachment: fixed; hacemos que la imagen no se mueva junto al contenedor y, al hacer scroll, vamos viendo la imagen que se ha quedado fija, creando un efecto de máscara de capa.
background-image: url("img/road.jpg");
background-size: cover;
background-attachment: fixed;Haz scroll con la página: la imagen se queda fija y el contenedor va mostrando distintas partes.
Tabla resumen
| Nivel | Propiedad | Qué hace |
|---|---|---|
| Básico | background-image | Define la imagen (o degradado) de fondo. |
| Básico | background-position | Posiciona la imagen dentro del contenedor. |
| Básico | background-repeat | Controla si la imagen se repite y cómo. |
| Básico | background-size | Ajusta el tamaño de la imagen (cover, contain, medidas). |
| Avanzado | background-attachment | Define si el fondo se mueve con el scroll (scroll) o queda fijo (fixed). |
| Avanzado | background-blend-mode | Fusiona entre sí las imágenes de fondo y el color de fondo. |
/* Básico */
background-image: url("img/mobile-01.png"), url("img/conexion-alpha.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
/* Avanzado */
background-attachment: fixed;
background-blend-mode: multiply;Paso 1: estructura HTML
Creamos 3 contenedores a los que aplicaremos diferentes fondos, con las clases content, content2 y content3. Dentro de cada contenedor creamos otro contenedor hijo con la clase info, y dentro de este colocamos un <h1> y un <p>.
<body>
<div class="content">
<div class="info">
<h2>Sección 01</h2>
<p>
Lorem ipsum dolor sit amet, consectetur
arcu aliquet euismod. Praesent pulvinar
eget odio molestie sollicitudin ut eget
</p>
</div>
</div>
<div class="content2">
<div class="info">
<h2>Sección 02</h2>
<p>
Lorem ipsum dolor sit amet, consectetur
arcu aliquet euismod. Praesent pulvinar
eget odio molestie sollicitudin ut eget
</p>
</div>
</div>
<div class="content3">
<div class="info">
<h2>Sección 01</h2>
<p>
Lorem ipsum dolor sit amet, consectetur
arcu aliquet euismod. Praesent pulvinar
eget odio molestie sollicitudin ut eget
</p>
</div>
</div>
</body>Paso 2: tamaño y borde
Definimos el tamaño de cada contenedor y aplicamos un borde de 1px para ver nuestros contenedores:
.content{
/*tamaño contenedor*/
width:100%;
height:800px;
border:1px solid black;
}
.content2{
/*tamaño contenedor*/
width:100%;
height:450px;
border:1px solid black;
}
.content3{
/*tamaño contenedor*/
width:100%;
height:850px;
border:1px solid black;
}Paso 3 (.content): dos imágenes de fondo
- 1. Colocamos 2 imágenes de fondo. Recordamos que la última imagen se coloca en la «capa 2» de fondo (capa1 = móvil, capa2 = fondo).
- 2. Definimos el tamaño del móvil a
800px; no hace falta poner la altura a esta imagen porque adapta su proporción. Definimos el tamaño de la capa2 comocoverpara que ocupe todo el contenedor. - 3. Definimos que no se repita el fondo; este valor afecta a ambas imágenes.
background-image: url("img/mobile-01.png"), url("img/conexion-alpha.jpg");
background-size: 800px, cover;
background-repeat: no-repeat;Paso 4 (.content): posición
- 1. Posicionamos el móvil a la derecha y a
300pxde altura en el eje Y; este último paso hace que sobrepase el límite del contenedor, recortando así la imagen. - 2. El fondo de la capa 2 lo centramos.
/*tamaño contenedor*/
width:100%;
height:800px;
border:1px solid black;
background-image: url("img/mobile-01.png"),url("img/conexion-alpha.jpg");
background-size: 800px, cover;
background-repeat: no-repeat;
background-position: right 300px, center;Paso 5 (.content): modo de fusión
Añadimos el parámetro background-blend-mode para crear un efecto de fusión entre ambas imágenes.
/*tamaño contenedor*/
width:100%;
height:800px;
border:1px solid black;
background-image: url("img/mobile-01.png"),url("img/conexion-alpha.jpg");
background-size: 800px, cover;
background-repeat: no-repeat;
background-position: right 300px, center;
background-blend-mode:multiply;Paso 6 y 7: contenedor hijo y alineación
Paso 6 (.info): definimos el tamaño de nuestro contenedor hijo info y le asignamos un padding (espaciado interior) y un fondo blanco semitransparente. Paso 7 (.content): volvemos a la clase content y alineamos todo el contenido («contenedor hijo») al centro en ambos ejes mediante flex.
.info{
width:65%;
padding:32px;
background-color: rgba(255, 255, 255, 0.5);
}.content{
/*tamaño contenedor*/
width:100%;
height:800px;
border:1px solid black;
/*fondo*/
background-image: url("img/mobile-01.png"),url("img/conexion-alpha.jpg");
background-size: 800px, cover;
background-repeat: no-repeat;
background-position: right 300px, center;
/*modo fusión fondo*/
background-blend-mode:multiply;
/*alineación contenido FLEX*/
display: flex;
justify-content: center;
align-items: center;
}Paso 8 (.content2): imagen fija
La clase info nos servirá para nuestras 3 secciones; copiaremos y pegaremos en las otras secciones el paso 7 de alineación mediante flex.
- Añadimos una imagen de fondo.
- Ponemos el tamaño en
coverpara que ocupe todo el contenedor; nuestra imagen tiene más altura que nuestro contenedor. - Asignamos
background-attachment: fixed;para que nuestra imagen de fondo se quede fija. Probamos el resultado haciendo scroll.
.content2{
/*tamaño contenedor*/
width:100%;
height:450px;
border:1px solid black;
background-image: url("img/road.jpg");
background-size: cover;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
}Paso 9 (.content3): patrón con repeat
- 1. Añadimos un color de fondo gris.
- 2. Añadimos una imagen de fondo para crear un patrón.
- 3. Repetimos el fondo.
- 4. Ajustamos el tamaño de la imagen que se repetirá.
.content3{
/*tamaño contenedor*/
width:100%;
height:850px;
border:1px solid black;
background-color: gainsboro;
background-image: url("img/bg-dot.png");
background-repeat: repeat;
background-size: 12px;
display: flex;
justify-content: center;
align-items: center;
}Resultado del caso práctico
Sección 1: fondo con 2 imágenes, posicionado a medida y con modo de fusión entre ambas. Sección 2: fondo con imagen fija, crea un efecto de movimiento tipo parallax. Sección 3: fondo con un patrón mediante repeat.
Sección 01
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit scelerisque urna, ut consequat arcu aliquet euismod. Praesent pulvinar lobortis urna, eget odio molestie sollicitudin ut eget.
Sección 02
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit scelerisque urna, ut consequat arcu aliquet euismod. Praesent pulvinar lobortis urna, eget odio molestie sollicitudin ut eget.
Sección 01
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit scelerisque urna, ut consequat arcu aliquet euismod. Praesent pulvinar lobortis urna, eget odio molestie sollicitudin ut eget.
Caso práctico 2 · Paso 1: estructura HTML
Centrar contenido con Flex y Padding. Creamos 2 contenedores a los que aplicaremos diferentes fondos, con las clases content1 y content2. Dentro de cada contenedor creamos otro contenedor hijo con la clase info1 (o info2) y dentro de este un <h2> con la clase title1, un <p> con la clase text1 y un enlace con la clase button1. Replicamos las clases en el segundo contenedor.
<div class="content1">
<div class="info1">
<h2 class="title1">Título ección</h2>
<p class="text1">
Lorem ipsum dolor sit amet, consectetur
ultrices urna, ac fringilla neque fermentum sed.
Sed ultrices fringilla ipsum a dapibus. Donec
Nullam iaculis arcu neque, vitae gravida libero
nec pellentesque erat. Quisque hendrerit massa
Morbi elementum varius porta.
</p>
<a href="" class="button1">Botón</a>
</div>
</div>
<div class="content2">
<div class="info2">
<h2 class="title2">Título ección</h2>
<p class="text2">
Lorem ipsum dolor sit amet, consectetur
ultrices urna, ac fringilla neque fermentum sed.
Sed ultrices fringilla ipsum a dapibus. Donec
Nullam iaculis arcu neque, vitae gravida libero
nec pellentesque erat. Quisque hendrerit massa
Morbi elementum varius porta.
</p>
<a href="" class="button2">Botón</a>
</div>
</div>Paso 2: fondo, info y botón
.content1: añadimos una imagen de fondo y una altura de800px..info1: anchura del 60%. Añadimos padding y un color de fondo blanco con transparencia..title1y.text1: asignamos color a ambas clases y un tamaño grande al título..button1: creamos un botón con las siguientes características.
Cuando hacemos hover queremos que el color de fondo del botón sea transparente; vemos una nueva propiedad del color: background-color: transparent;
/*contenido 1*/
.content1{
background-image: url("img/blue-futre-room.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height:800px;
}
.info1{
background-color: rgba(255, 255, 255, 0.443);
width:60%;
padding:80px;
}
.title1{
font-size: 32px;
color:white;
}
.text1{
color:rgb(8, 8, 228);
}
.button1{
background-color: white;
color: rgb(8, 8, 228);
padding:8px 16px;
border: 2px white solid;
transition: 0.6s;
text-decoration: none;
}
.button1:hover{
background-color: transparent;
color: white;
transition: 0.6s;
}Paso 3: centrado con flex
Centramos el contenido que hay dentro de content1 aplicando flex. Ahora el div info1 que está dentro de content1 estará centrado en el eje principal (row) y en el eje secundario (column).
/*contenido 1*/
.content1{
background-image: url("img/blue-futre-room.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height:800px;
display: flex;
justify-content: center;
align-items: center;
}Título ección
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pharetra ultrices urna, ac fringilla neque fermentum sed.
BotónPaso 4: contenido 2 (sin medidas)
.content2: añadimos una imagen de fondo; no añadimos ninguna medida a nuestro contenedor padre..info2: añadimos padding y un color de fondo blanco con transparencia; no añadimos ninguna medida a nuestro contenedor hijo.- Duplicamos las clases title, text y button y les asignamos un 2 al final de la clase.
/*contenido 2*/
.content2{
background-image: url("img/purple-future-room.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.info2{
background-color: rgba(255, 255, 255, 0.443);
padding:80px;
}
.title2{
font-size: 32px;
color:white;
}
.text2{
color:rgb(8, 8, 228);
}
.button2{
background-color: white;
color: rgb(8, 8, 228);
padding:8px 16px;
border: 2px white solid;
transition: 0.6s;
text-decoration: none;
}
.button2:hover{
background-color: transparent;
color: white;
transition: 0.6s;
}Paso 4: centrado con padding (explicación)
Para centrar el contenedor hijo respecto al padre vamos a añadir padding al contenedor padre.
- Como el contenedor padre no tiene altura, coge la altura del contenedor hijo: ahora el contenedor padre y el hijo tienen las mismas dimensiones.
- Al contenedor hijo tampoco le hemos dado medidas, por eso coge toda la anchura que puede (100%) y la altura se la determina el padding.
.content2{
background-image: url("img/purple-future-room.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 5% 16%;
}
Resultado final del caso práctico 2
Contenido 1:
- Definimos nosotros la medida de los contenedores.
- Centramos mediante flex.
Contenido 2:
- No definimos tamaño (la anchura siempre será la máxima, la altura la define lo que ocupen los elementos HTML).
- Centramos añadiendo padding al contenedor padre.
/*contenido 1*/
.content1{
background-image: url("img/blue-futre-room.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height:800px;
display: flex;
justify-content: center;
align-items: center;
}
.info1{
background-color: rgba(255, 255, 255, 0.443);
width:60%;
padding:80px;
}
/*contenido 2*/
.content2{
background-image: url("img/purple-future-room.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 5% 16%;
}
.info2{
background-color: rgba(255, 255, 255, 0.443);
padding:80px;
}