Hoy vamos a aprender sobre cada una de las propiedades de fondo CSS con cada uno de sus posibles valores. Aprenderemos haciendo. 隆Vamos!馃弲

Tabla de contenidos

  • Todas las propiedades
  • background-image
  • background-size
  • background-repeat
  • background-position
  • background-origin
  • background-clip
  • background-attachment
  • background-color
  • Atajos y combinaciones
  • Conclusi贸n

Tambi茅n puedes ver este tutorial en YouTube:

Todas las propiedades

Esta es la lista de todas las propiedades que vamos a revisar. El texto rojo al final es la taquigraf铆a.

imagen-2

驴Qu茅 son las propiedades de fondo CSS?

imagen-3

Las propiedades de fondo CSS nos dejan controlar el tama帽o y las propiedades de las im谩genes, lo que nos permite hacer im谩genes responsive para peque帽as y grandes pantallas. Esto, a su vez, nos ayuda a crear sitios web responsive.
Por ejemplo,

  • La propiedad background-size nos permite asignar un nuevo valor de ancho y alto para nuestras im谩genes de acuerdo al tama帽o de la pantalla.
  • background-position nos permite decir al navegador donde poner la imagen en la pantalla.

Y hay mucho m谩s.

驴C贸mo configurar el proyecto?

imagen-4

Antes de programar, necesitas saber un poco sobre HTML, CSS y c贸mo usar VScode.
Para probar las propiedades y sus valores, sigue los siguientes pasos 馃憞

  1. Crea una nueva carpeta llamada 'BACKGROUND-PROJECT'. Abre la carpeta en VScode.
  2. Crea los archivos index.html y style.css.
  3. Instala 'live server' en VScode.
  4. Inicia live server.

HTML

Crea un div con el nombre de la clase 'container' dentro del body tag en el archivo HTML.

<div class="container"></div>

CSS

En CSS, t煤 debes incluir el tama帽o para el 'container', de lo contrario nosotros no seremos capaces de ver la imagen. En nuestro caso, estableceremos 100vh, igual a:

.container{
  height : 100vh;
}

Descargar las imagenes del proyecto

Las im谩genes est谩n en mi GitHub repository. Te explico c贸mo descargarlas:

  1. Copia el link anterior 鈽濓笍
  2. Ve a downgit y pega el link que ya copiaste.
  3. Sigue los pasos del siguiente video 馃憞
imagen-5

y... 隆estamos listos!

imagen-6

Vamos a programar 馃槉

La propiedad background-image

Usando esta propiedad, podemos a帽adir im谩genes a lo largo de nuestra hoja de estilos.

imagen-7

Escribimos la sintaxis despu茅s de escribir el selector, igual a:馃憞

.container{
// El path/URL de la imagen va dentro de las comillas simples 馃憞 
   background-image  :  url(' ');
}

Podemos usar bakbroung-image de dos maneras:

  • Con el path del directorio local.
  • Especificando la URl de la imagen.

驴Com贸 usar background-image a trav茅s del directorio

Aqu铆 tenemos la sintaxis para background-image cuando usamos el directorio 馃憞.

.container{
// Coloca la ruta dentro de las comillas simples 馃憞 
   background-image  :  url(' ');
}
imagen-8

Hay tres casos donde necesitamos especificar la ruta de la imagen en nuestro CSS:

  1. Cuando la imagen y style.css est谩n en la misma carpeta.
  2. Cuando la imagen est谩 en la siguiente carpeta.
  3. Cuando la imagen est谩 en la carpeta anterior.

Cuando la imagen y style.css est谩n en la misma carpeta, se va ver de la siguiente manera. 馃憞

Observa que kitty.png y style.cssest谩n en la misma carpeta padre llamada BACKGROUND-PROJECT:

imagen-9

Para localizar la ruta de kitty.png, escribe el siguiente c贸digo en style.css:

.container{
   background-image : url("kitty.png");
   
   height: 100vh;
// establecer el tama帽o y no permitir repetici贸n de la imagen
   background-repeat : no-repeat;
   background-size : contain;
 }

Cuando la imagen est谩 en la carpeta siguiente y style.css en la carpeta anterior. Observa como la imagen debajo kitty.png' est谩 en la carpeta Assets mientras que style.css est谩 en la carpeta anterior.

imagen-10

Para continuar y encontrar el archivo kitty.png, debemos escribir un punto y un slash igual a (./) luego de la comilla en style.css. Entonces escribimos el nombre de la carpeta y luego slash (/) para finalmente colocar el nombre de la imagen, igual a: 馃憞

 .container{
   background-image : url("./Assets/kitty.png");

   height: 100vh;
// establecer el tama帽o y no permitir repetici贸n de la imagen
   background-repeat : no-repeat;
   background-size : contain;
 }

Si la imagen est谩 en la carpeta anterior, entonces necesitamos volver. Observa en la imagen abajo 馃憞 que style.css est谩 en la carpeta src y kitty.png esta fuera de la carpeta src.

imagen-11

Para volver a la carpeta anterior y encontrar el archivo kitty.png, necesitamos escribir dos puntos seguidos y un slash (../) luego de las comillas en el archivo style.css. Entonces escribimos el nombre de la imagen, igual a: 馃憞

 .container{
   background-image : url("../kitty.png");

   height: 100vh;
// establecer el tama帽o y no permitir repetici贸n de la imagen
   background-repeat : no-repeat;
   background-size : contain;
 }

驴C贸mo usar background-image con link directo?

Esto es bastante sencillo. Escribimos la propiedad y colocamos en link dentro link().

imagen-12

Para trabajar con una imagen como link directo, necesitamos escribir el siguiente c贸digo.

 .container{
    background-image : url("https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szxp3jqyjyksrep1ep82.png");

  height: 100vh;
// establecer el tama帽o y no permitir repetici贸n de la imagen
   background-repeat : no-repeat;
   background-size : contain;
 }

Tomemos un descanzo

imagen-13

La propiedad background-size

Podemos ajustar el tama帽o de una imagen usando la propiedad background-size.

imagen-14

Podemos escribir la sintaxis luego de escribir el nombre del selector, igual a 馃憞

.container{
// Podremos escribir 馃憞 aqu铆
  background-size  : cover;
}

Podemos usar background-size de 3 maneras:

  • Usar los valores cover/contain
  • Establecer el alto y ancho de la imagen
  • usar auto

Vamos a empezar revisando los valores cover & contain con tama帽o de [718px X 614px].

imagen-15

Valor cover

Para este trabajo debemos incluir una imagen, establecer altura y detener la repetici贸n de la imagen. Podemos hacer esto en CSS: 馃憞

.container{
  background-image : url('cute-bear.png');
  background-repeat: no-repeat;
  background-size : cover;

// Debe incluir la altura
  height : 100vh;
}

Cuando usamos esta propiedad, estirar谩 la imagen a toda la pantalla incluso cuando cambiamos el tama帽o de la ventana. Mira el ejemplo a continuaci贸n 馃憞

imagen-16

Este valor conservar谩 el tama帽o de la imagen [Responsive Image] incluso cuando cambiamos el tama帽o de la ventana. Mira el video a continuaci贸n para ver como funciona 馃憞

imagen-17

Tama帽o de ancho y alto

Podemos establecer el ancho y la altura de la imagen usando la propiedad background-size.

imagen-18

Aqu铆 esta la sintaxis en CSS: 馃憞

.container{
// Aqu铆, podemos ver ancho馃憞  &  馃憞 alto
  background-size : 200px   200px;
}

No olvidemos insertar la imagen, establecer el alto de la imagen y detener la repetici贸n de la imagen. El c贸digo se ver铆a as铆:

.container{
  background-image : url('cute-bear.png');
  background-repeat: no-repeat;

// Aqu铆, podemos ver ancho馃憞  &  馃憞 alto
  background-size : 200px  200px;

// Debe incluir la altura
  height : 100vh;
}
}

tama帽o autom谩tico

Cuando usamos este valor, la imagen estar铆a en su tama帽o original. No cambiaria cuando hacemos cambiamos el tama帽o de la ventana. Esto se ver铆a as铆:

imagen-19

La propiedad background-repeat

Esta propiedad nos permite repetir la imagen m煤ltiples veces.

iamgen-20

Escribimos la sintaxis luego del selector, igual a 馃憞

.container{
// Podemos cambiar el valor 馃憞 aqu铆
  background-repeat : repeat;
}

Esta propiedad tiene seis valores posibles:

  • repeat
  • repeat-x
  • repeat-y
  • no repeat
  • space
  • round

Aqu铆 podemos ver el resultado de cada uno de los posibles valores. Observemos que el tama帽o de la imagen ejemplo es de [200px X 200px].

imagen-21
imagen-22
imagen-23

Ahora, vamosa investigar que ocurre con cada valor. Pero, antes de esto, observemos que necesitamos insertar una imagen usando la propiedad `background-image.

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat :  ; //Aqu铆 colocaremos las opciones

   height : 100vh;
}

El valor repeat

Usando este valor, podemos repetir la misma imagen m煤ltiples veces a lo largo de los ejes X y Y tanto como el tama帽o de la pantalla lo permita. En el ejemplo siguiente el tama帽o de la imagen es de 200px x 200px.

imagen-24

Para duplicar este resultado, escribimos ->

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : repeat;

   height : 100vh;
}

El valor repeat-x

Este valor nos permite repetir la misma imagen m煤ltiples veces a lo largo del eje x tanto como el tama帽o de la pantalla lo permita. En el ejemplo siguiente el tama帽o de la imagen es de 200px x 200px.

imagen-25

Para que esto ocurra, escribimos ->

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : repeat-x;

   height : 100vh;
}

El valor repeat-y

Este valor funciona de la misma manera que "repeat-x" pero a lo largo del eje y tanto como el tama帽o de la pantalla lo permita. En el ejemplo siguiente el tama帽o de la imagen es de 200px x 200px.

imagen-26

Para esta salida, escribimos ->

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : repeat-y ;

   height : 100vh;
}

El valor no-repeat

Podemos tener el tama帽o original de nuestra imagen sin repeticiones usando este valor. En el ejemplo siguiente el tama帽o de la imagen es de 200px x 200px.

imagen-27

Para este resultado, escribimos ->

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : no-repeat ; 

   height : 100vh;
}

El valor space

Trabaja con los ejes X y Y. Podemos ver la principal diferencia en los espacios cuando cambiamos el tama帽o de la ventana. Observa que obtenemos espacio en blanco cuando cambiamos el tama帽o de la pantalla:

imagen-28

Para experimentar con este valor debemos escribir ->

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : space ;

   height : 100vh;
}

El valor round

Esto funciona tanto para el eje x como el eje y. Observa que la imagen es expandida cuando nosotros cambiamos el tama帽o de la pantalla.

imagen-29

Solo debemos escribir ->

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : round ; 

   height : 100vh;
}

La propiedad background-position

Esta propiedad es usada para cambiar la posici贸n de la imagen en la pantalla.

imagen-30

Aqu铆 tenemos la sintaxis: 馃憞

.container{
// Esta es       eje x馃憞  &  馃憞 eje y
background-position : 300px  200px;
}

No podemos olvidar insertar la imagen, establecer la altura y evitar la repetici贸n de la imagen. Podemos establecer el tama帽o de la imagen a 300px x 200px usando la propiedad background-size:

.container{
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;

// Este es       eje x馃憞  &  馃憞 eje y
  background-position : 300px 200px;
  height: 100vh;
}

Como resultado:

imagen-31

Podemos usar una combinaci贸n de estos valores:

  • top
  • left
  • right
  • bottom
  • percentage values

Por ejemplo, vamos a establecer nuestra imagen abajo a la derecha. Aqu铆 est谩 el c贸digo para esto:

.container{
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;

// Este es           eje x馃憞  &  馃憞 eje y
  background-position : bottom right;
  height: 100vh;
}
imagen-32

Calculando el espacio permitido de la pantalla, el valor porcentaje determina la posici贸n de la imagen. Aqu铆 lo vemos en c贸digo:

.container{
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;

// Este es           eje x馃憞  &  馃憞 eje y
  background-position : 25% 15%;
  height: 100vh;
}

Y est茅 es el resultado:

imagen-33

La propiedad background-origin

Esta propiedad nos permite establecer el origen de nuestra imagen a trav茅s del CSS box model.

imagen-34

Escribimos la sintaxis luego de escribir el selector, igual a 馃憞

container{
// Escribiremos el valor 馃憞 aqu铆
  background-origin: border-box;
}

Tiene cuatro posibles valores:

  • border-box
  • padding-box
  • content-box
  • inherit

En el standard CSS box model, la parte exterior es border. entonces luego tenemos el padding y finalmente tenemos el content en el centro.

imagen-35

Aqu铆 tenemos el resultado de cada una de las propiedades:

imagen-36

Para recrear estos resultados:

  • Primero necesitamos una imagen; necesitamos detener la repetici贸n de la imagen, y establecer el alto y el ancho al tama帽o del contenedor de la imagen.
  • Una vez hecho, insertariamos 40px de padding, de lo contrario no podremos ver la diferencia entre padding-box y content-box.
  • Entonces, insertamos un borde rojo de 25px. Establecemos la propiedad border-style a dashed para obtener el borde de l铆nea discontinua en la pantalla.
  • Establecemos la propiedad background-size a 400px & 400px.

Aqu铆 podemos ver esto en c贸digo:

.container{
  background-image: url('cute-girl.png');
  background-repeat: no-repeat;
  background-size: 400px 400px;


// Escribiremos el valor 馃憞 aqu铆 para ver diferencia
  background-origin: border-box;
  padding: 40px;
  border: 25px solid red;
  border-style: dashed;

// ancho y alto del contenedor 馃憞
  width : 400px;
  height : 400px;
}

Tomamos un descanso

imagen-37

La propiedad background-clip

Esta propiedad es igual a background-origin. Pero la principal diferencia es que background-clip CORTA la imagen para que quepa dentro del cuadro, mientras background-origin EMPUJA el contenido dentro del cuadro para que quepa.

imagen-38

Podemos escribir la sintaxis luego de escribir el selector, igual a 馃憞

.container{
// Podremos escribir los valores 馃憞 aqu铆
  background-clip  : border-box;
}

Tiene cuatro valores posibles:

  • border-box
  • padding-box
  • content-box
  • inherit

Aqu铆 tenemos el resultado de cada una de las propiedades

imagen-39

Para recrear estos resultados debemos:

  • Primero necesitamos una imagen, necesitamos detener la repetici贸n, y necesitamos establecer el alto y el ancho ambos como el contenedor de la imagen.
  • Una vez hecho, podremos insertar 40px de padding, de lo contrario no podremos observar la diferencia entre padding-box y content-box.
  • Entonces, insertamos un borde rojo de 25px. Establecemos la propiedad border-style a dashed para obtener el borde de linea discontinua en la pantalla.
  • Establecemos la propiedad background-size a 400px & 400px.

El c贸digo se ver铆a as铆:

.container{
  background-image: url('cute-girl.png');
  background-repeat: no-repeat;
  background-size: 400px 400px;

// Cambiamos los valores aqu铆 馃憞  para ver las diferencias 
  background-clip: border-box;
  padding: 40px;
  border: 25px solid red;
  border-style: dashed;

// Alto y ancho para el contenedor 馃憞
  width : 400px;
  height : 400px;
}

La propiedad background-attachment

Esta propiedad nos permite manejar el comportamiento de nuestro contenido e imagen cuando hacemos scroll.

imagen-40

Nosotros escribimos la sintaxis luego del selector, igual a 馃憞

.container{
// Podremos escribir los valores 馃憞 aqu铆
background-attachment: scroll;
}

Hay tres valores posibles:

  • scroll
  • fixed
  • local

Cuando usamos scroll la imagen se fija y podemos desplazarnos libremente por nuestro contenido. El valor fijo nos da un efecto de paralaje en el desplazamiento del mouse y produce m煤ltiples im谩genes siempre que nuestro contenido no termine.

Podemos ver los resultados en vivo aqu铆 馃憞

Referencia https://dev.to/hadrysmateusz/learn-all-8-background-css-properties-in-5-minutes-2lk4

La propiedad background-color

Podemos usar esta propiedad para establecer el background con color.

imagen-42

Debemos escribir la sintaxis luego de escribir el selector, igual a 馃憞

.container{
// Podemos escribir el valor 馃憞  aqu铆
   background-color :  red;
}

Existen muchas opciones pero las m谩s populares son:

  • Color s贸lido usando nombre o el valor hexadecimal
  • Usando la funci贸n RGB()
  • Usando la funci贸n `linear-gradient()``

驴C贸mo obtener un color s贸lido de fondo utilizando el nombre o el valor hexadecimal?

Podemos usar el nombre del color para establecer el color de fondo haciendo:

.container{
   background-color : red;

   height : 100vh;
}

O, podemos usar el color hexadecimal de la siguiente manera:

.container{
   background-color : #ff0000; //color rojo

   height : 100vh;
}

Puedes revisar estos recursos para m谩s colores.

coolors.co
flatuicolors.com

驴C贸mo usar la funci贸n RGB() para establecer el color de fondo?

Podemos usar la funci贸n RGB() para establecer el color de fondo haciendo:

.container{
// Nombre del color "American River"
   background-color : rgb(99, 110, 114);

   height : 100vh;
}

Tambi茅n podemos usar RGBA() para establecer el color y la opacidad

.container{
.container{
// El 0.5 al final representa        50% 馃憞 opacity 
   background-color :  rgba(99, 110, 114, 0.5);

   height : 100vh;
}
}

Este es un experimento con el color 'Eton blue' con varios niveles de opacidad.

imagen-43
imagen-44

Puedes visitar la p谩gina para m谩s c贸digos usando CSS.

Vamos a recrear el siguiente color de fondo:

imagen-45

'#22c1c3'representa el color a la izquierda y '#fdbb2d' representa el color a la derecha. '90deg' nos dice como se inclinaran estos dos colores para generar el degradado.

El c贸digo se ve as铆:

.container{
 
   background: linear-gradient(90deg, #22c1c3, #fdbb2d);  

   height : 100vh;
}

Resumen de las propiedades

Este es el resumen de las propiedades de background:

imagen-46

Para este experimento, vamos a colocar kitty.png en nuestro navegador usando un color de fondo azul con 200px en el eje X y 200px en el eje Y. El c贸digo referencia ser铆a:

.container{
 
   background-color : skyblue;
   background-image : url('kitty.png);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: 200px 200px;

   height : 100vh;
}

Y este ser铆a el c贸digo usando una sola sentencia:

.container{
 
   background: skyblue url('kitty.png) no-repeat fixed 200px 200px;

   height : 100vh;
}

Usarlo en una sola sentencia nos ahorra tiempo. Si quieres saltar uno de los valores, puedes hacerlo siempre que se mantenga el orden de las propiedades.

Conclusi贸n

Aqu铆 tienes una medalla por leerlo todo hasta el final 鉂わ笍
Las quejas y las sugerencias son muy bien apreciadas 鉂わ笍

imagen-47

Creditos

YouTube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb

Traducido del art铆culo de Joy Shaheb - Every CSS Background Property Illustrated and Explained with Code Examples 馃帠锔