En el proceso de diseño de una página web, el fondo es un elemento que tendemos a olvidar. Usualmente, estamos tan concentrados en el posicionamiento y diseño de los elementos principales, que olvidamos que el fondo también aporta. Por ello, en este post te recordamos la importancia de la propiedad background en CSS y las posibilidades que nos da para el diseño de imágenes y patrones del fondo.
¿Qué puedo hacer con la propiedad background en CSS?
Además del comúnmente usado background-color, los fondos más utilizados son imágenes. Sean una textura, un paisaje o un personaje, las imágenes pueden ser fondos decorativos o fondos significativos. A continuación, te presentamos qué opciones de la propiedad background en CSS podemos insertar en un elemento para modificar su imagen de fondo:
- background-image: antes de jugar con cualquier otra propiedad, debemos insertar background-image, que nos permite poner una imagen de fondo y hacer que los elementos principales estén encima de la imagen. Esto nos evita tener que jugar con el z-index y el posicionamiento de cada elemento, posicionando el fondo con más facilidad.
- background-repeat: cuando esta propiedad está definida como repeat, el navegador creará una cuadrícula en la que repetirá la imagen las veces que sea necesario para ocupar el espacio definido. Esto sucederá solo si la imagen es más pequeña que el espacio a ocupar. Si no queremos que esto pase, podemos definir la propiedad como no-repeat.
- background-size: permite jugar con el tamaño de nuestro fondo con respecto al elemento del que es fondo. Al insertar en esta propiedad la opción contain, el tamaño se ajustará para hacer que todo el fondo sea visible dentro del elemento. Cuando las proporciones no son las mismas, el elemento tendrá espacio sobrante. Al insertar la opción cover, le decimos al navegador que queremos que el fondo ocupe todo el espacio del elemento, sin importar qué recortes tenga que hacer. Ten presente que el navegador hará los recortes en función de la posición que le otorgues a tu fondo.
- background-position: hace referencia a la posición del fondo. Esto hará que el navegador priorice mostrar una cierta sección de la imagen de fondo sobre las demás. Podemos definir la posición usando las palabras clave top, bottom, right, left o center. Podemos mezclar estas palabras clave para definir la posición en los ejes. Entonces, si escribimos center center, estamos diciendo que queremos que la imagen esté centrada en ambos ejes.
También podemos utilizar las unidades de medida CSS en esta propiedad; el primer número será la alineación horizontal y el segundo, la alineación vertical. Esto nos permite hacer que elementos específicos de la imagen que no están centrados a los bordes estén siempre visibles. - background-attachment: permite definir si el tamaño es fijo o no.
- background-clip: permite determinar con base a qué recortamos nuestro elemento de fondo.
- background-blend-mode: permite definir la forma en la que el fondo se mezcla con la página web. Se suele definir como normal, pero puede funcionar para jugar con transparencias.
Para saber más sobre la propiedad background en CSS, puedes visitar la página oficial de Mozilla Developer Network sobre la propiedad background.
Ahora que sabes que el fondo es un elemento de diseño versátil y útil, ¡es el momento de que pongas en práctica la propiedad background en CSS! ¿Y qué mejor lugar para jugar con una propiedad de diseño que en tu propia página web? Si quieres seguir aprendiendo sobre los lenguajes de programación para web, a la vez que creas y diseñas tu propio sitio web, ¡KeepCoding tiene el bootcamp intensivo perfecto para ti! Con nuestro Desarrollo Web Full Stack Bootcamp serás un experto en desarrollo web en pocos meses. ¡Apúntate ya!
