Para agregar una imagen de fondo de nuestra pagina web debemos utilizar la propiedad background-image. Ejemplo:
Queremos que nuestra pagina tenga de fondo la foto de la hinchada de River, la cual descargamos a nuestra computadora.
.body{
background-image:url("/img/hinchada.jpeg")
}
Analicemos la sintaxis:
background-image:url(”/img/hinchada.jpeg”)
Siempre debe acompañarse el prefijo url para indicarle al archivo css donde debe buscar la imagen de fondo
La ruta para llegar a la imagen. Puede ser una ruta local, como es el caso, o una pagina de internet en donde se aloje la imagen. Es recomendable usar archivos locales porque las paginas de internet pueden caerse.
Es posible agregar varias imagenes de fondo para una misma pagina web. Para lograrlo, solo debemos separar con comas cada una de las imagenes de fondo. Ejemplo:
Queremos agregar de fondo de la pagina web el escudo de River y un fondo con textura de papel
body{
background-image:url("/img/texturas.jpeg"),
url("/img/escudo.jpeg");
}
Inclusive puede agregarse algo que no sea una imagen en esta propiedad, siempre y cuando tambien agreguemos una imagen. Si no queremos agregar imagenes, usemos la propiedad background-color. Ejemplo:
Quiero agregar el escudo de River y un degrade de fondo.
body{
background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
url("/img/escudo.jpeg");
}
ATENTI
El primero que agreguemos si agregamos varios elementos en background-image es el que quedará debajo. Tenerlo en cuenta para ver como queremos nuestro diseño