Background CSS


Lección 23 / 29

Background CSS

Css CSS

Hemos dicho que el lenguaje CSS cuenta con numerosas propiedades. Una de las más utilizadas, es sin duda la propiedad genérica "background", que como su nombre indica, está relacionada con los fondos de los elementos de tu página web.
Ahora bien, esta propiedad genérica se declina de varias formas, es decir que podemos tratar el fondo de un elemento de diferentes formas.

Pasemos, pues, a analizar las propiedades del background.

  • background-color: el valor de esta propiedad debe asignarse exactamente en cualquiera de los modos de valores de color vistos en la guía anterior.
  • background-image: se usa para establecer una imagen de fondo para su elemento; aceptará como valor la palabra "url" seguida del enlace a la imagen o de la ruta de la imagen en tu ordenador. Es una buena práctica usar una ruta interna a su PC y no un enlace a un sitio web, ya que ese recurso puede no ser permanente en ese enlace.
    ejemplo
.elemento1 {
   background-image: url(https://aulab.es/storage/831/conversions/Los-mejores-shortcuts-para-desarrolladores-web-cover.jpg)
}
  • background-repeat: esta propiedad te permitirá repetir o no la imagen de fondo de tu elemento; el valor se asignará con una palabra clave elegida de ‘repeat x’ (repetirlo horizontalmente), ‘repeat y’ (repetirlo verticalmente) y ‘no repeat’ (para no repetirlo en absoluto).
  • background-position: determina la posición de su fondo en el elemento; acepta palabras clave como valores ‘bottom’, leftright y top’ o un tamaño de píxel a partir de la parte superior izquierda.

P.D. añadiendo solo dos valores nos referiremos al eje x y al eje y
ejemplo

.elemento1 {
   background-position: 50px 50px;
}
  • background-size: palabras clave aceptadas como valores son ‘auto (lo que hace que la imagen permanezca exactamente como es), ‘contain’ (que amplía la imagen al máximo sin apretarla ni cortarla) y ‘cover (que da la imagen de página completa)
  • background-attachment: esta propiedad regula el comportamiento de la imagen con respecto al scroll de la página; los valores aceptados, siempre expresados ​​en palabras clave, son ‘scroll’ (valor predeterminado gracias al cual la imagen permanece en su posición, por lo que ya no será visible cuando se desplace la página) y ‘fixed’ (gracias al cual obtenemos el llamado "efecto de paralaje": la imagen permanece fija y no desaparece cuando se desplaza la página)

El linear gradient

La propiedad background también puede aceptar un valor adicional. Estamos hablando del linear gradient.
La gran ventaja de la web frente al papel impreso es que tiene una excelente reproducción de los matices de color, que en muchos casos, si se dosifica y utiliza en la medida y forma adecuadas, puede hacer que nuestras webs sean mucho más atractivas.
Pero, ¿cómo funciona el linear-gradient?

header {
   background: linear-gradient(angulo expresado en deg, colore1, colore2);
}

En el ejemplo anterior, usamos el linear-gradient como el valor de la propiedad de fondo.
Como puedes ver, inmediatamente al lado, hemos insertado algunas instrucciones, o sea, el ángulo del degradado, obviamente expresado en grados (por ejemplo, 120 grados), el color desde el cual tendrá que comenzar el degradado y el color donde tendrá que llegar, separados por una coma.

Esta es la sintaxis para usar el linear gradient.
Los colores añadidos ​​como valores del linear gradient se pueden expresar en todas las modalidades que hemos visto cuando hablamos de la propiedad inherente del color.
¡Pero eso no es todo! El lenguaje CSS literalmente nos permite complacernos y expresar nuestro estilo creativo como más queremos.
También podemos añadir transparencias a nuestras sombras.

Para agregar transparencia a nuestro linear-gradient, usamos la función rgba () para definir las paradas de color. El último parámetro de la función rgba() puede ser un valor de 0 a 1 y define la transparencia del color: como ya se mencionó, 0 indica transparencia total, 1 indica color completo.

El siguiente ejemplo muestra un degradado que es totalmente transparente al principio y se vuelve negro sólido:

header {
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)), url(https://aulab.es/storage/828/conversions/añadir-css-en-html-cover.jpg);
}

Este truco puede ser particularmente útil cuando quieras aplicar una subespecie de superposición a la imagen de tu encabezado, tal vez para hacer que los elementos de texto que contiene sean más legibles. Como puede ver, de hecho, el degradado lineal, aquí, se ha aplicado a la propiedad 'imagen de fondo' y está seguido por la URL de la imagen a usar.

P.D. Los colores de nuestra sombra no necesariamente tienen que ser dos. Si lo deseas, puedes incluso crear un tono de arcoíris: ¡el único límite, cuando experimentas con estas posibilidades, es el sentido común!

© 2022 Aulab. Todos los derechos reservados • P.IVA: IT07647440721 • Política de privacidad