Establecer fondos para los elementos de las páginas Web que creamos es una tarea habitual que debemos saber resolver.
La propiedad background lleva muchos años en el estándar CSS y ha recibido numerosas actualizaciones que nos abren un completo abanico de posibilidades para resolver situaciones de diseño.
La propiedad background de CSS
Mediante background, podremos establecer colores de fondo y también imágenes. Además podremos especificar como estos fondos se mostrarán.
Un aspecto importante a señalar es que para que un elemento muestre el fondo que le asignemos, dicho elemento debe tener un contenido y/o un tamaño. Si tenemos dudas como realizar esto con CSS, en mi artículo Cómo asignar el tamaño a un elemento con CSS podemos aprender como hacerlo.
Es importante tener en cuenta que background puede funcionar como un shorthand o propiedad abreviada, es decir que podremos asignarle varios valores de una vez. Pero también podremos trabajar con el guión para asignar propiedades puntuales, por ejemplo background-color o backgrund-image.
Color de fondo
Establecer un color de fondo con CSS suele ser una característica que enseño a mis alumnos cuando comenzamos a ver CSS.
Para asignar un color de fondo a un elemento desde CSS, tenemos la posibilidad de hacerlo como vemos a continuación:
background-color: blue;Vale decir que pare el ejemplo anterior también seria válido background:blue;
El valor del ejemplo es azul (blue en inglés). Podremos utilizar varios colores predefinidos de esta forma (por su nombre en inglés), por su nomenclatura en hexadecimal (Ej: #3d00ff), por su valor RGB (ej: rgb(0,0,255)) o RGBA (ej: rgba(0,0,255,1)).
También es interesante saber que, además de colores sólidos, podremos establecer gradients desde CSS para el fondo de un elemento.
Imagen de fondo
La manera más simple de asignar una imagen de fondo, la suelo explicar a mis alumnos en las primeras clases de CSS, cuando se están iniciando en el tema. Un ejemplo podría ser el que veremos a continuación:
background-image: url('nombre_imagen.png');Para el ejemplo mencionado, deberíamos indicar la ruta y el nombre de la imagen. Además de archivos PNG, también podríamos utilizar JPG, GIF y SVG, entre otros formatos.
Cuando definimos una imagen de fondo, también podremos establecer sus dimensión dentro de la caja con background-size. Otras propiedades útiles son: background-position (para indicar su posición dentro de la caja) y background-repeat(para especificar si la imagen se repite y en qué ejes).
Es importante destacar que a partir de CSS3, contamos con la posibilidad de especificar más de una imagen como fondo de un elemento. Veamos un ejemplo de como hacerlo:
background-image: url('imagen1.gif'), url('imagen2.gif');Otras características para ajustar nuestros estilos
CSS3 y CSS4 han incorporado muchas opciones para facilitar nuestra vida a la hora de trabajar con maquetado Web, por ejemplo la posibilidad de realizar diseños Responsive , es decir adaptables a diferentes dispositivos, mediante Media Queries.
En cuanto a imágenes, es importante saber que además de poder asignarlas como fondo, desde CSS3 también podemos incorporar imágenes en los bordes.
Un tema interesante para tener en cuenta a la hora de dimensionar o asignar medidas a cajas, es que CSS, en sus versiones más modernas, ha incorporado la posibilidad de utilizar variables.
Si te resultó interesante este material, de seguro te gustará conocer 10 excelentes ejemplos de uso de CSS3 y qué es CSS creativo.
Si estás comenzando con CSS, algunos editores de código para editar HTML y CSS son: Visual Studio Code y Sublimetext.
Aprender HTML y CSS es fundamental para todos los que desean ser Desarrolladores Web Full Stack, siendo estos lenguajes fundamentales en el Front-end.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta