Fondos con CSS

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


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.