Fondos en CSS

Quieres darle un aspecto distinto a tus diseños? Puedes utilizar los fondos en CSS. Te ayudarán a mejorar el aspecto de tu página web.

Puedes ver ¿Qué es CSS? y ¿Cómo utilizar los colores en CSS? en mis artículos anteriores.

Fondos en CSS

Aquí aprenderás como establecer los backgrounds (fondos) en varios elementos HTML. Puedes establecer las siguientes propiedades de fondo:

La propiedad background-color se utiliza para establecer el color de fondo de un elemento.

La propiedad background-image se usa para establecer la imagen de fondo de un elemento.

La propiedad background-repeat se usa para controlar la repetición de una imagen en el fondo.

La propiedad background-position se usa para controlar la posición de una imagen en el fondo.

La propiedad background-attachment se usa para controlar el desplazamiento de una imagen en segundo plano.

Para acortar el código, también es posible especificar todas las propiedades de background en una sola propiedad. Esto se llama una shorthand property.

La shorthand property para el background es el background.

Background-color

El background-color adjudica el color de fondo de un elemento.

h1 { background-color: green; }
div { background-color: lightblue; }
p { background-color: yellow; }

Ejemplo de CSS background-color

Este texto está dentro de un elemento div.

Este párrafo tiene su propio fondo.

Todavía estamos dentro del elemento div.

Background-image

La propiedad background-image especifica una imagen para usar como fondo de un elemento.

Por defecto, la imagen se repite para que cubra todo el elemento.

div { background-image: url(“ejemplo-background-1.png”); }

Hola mundo!!!

Este elemento tiene fondo!

Ten muy en cuenta la lectura de los textos a la hora de escoger los fondos.

Este sería un mejor ejemplo

Hola mundo!!!

Este elemento tiene fondo!

Background-repeat

De manera predeterminada, la propiedad background-image repite una imagen tanto horizontal como verticalmente.

Algunas imágenes deben repetirse solo horizontal o verticalmente, o se verán extrañas, como esta:

Hola mundo!!!

Este elemento tiene fondo!

Hay imágenes que se ven mejor solo una vez:

Hola mundo!!!

Este elemento tiene fondo!

Hay otra imágenes que se ven bien si se repiten horizontalmente:

Hola mundo!!!

Este elemento tiene fondo!

Background-position

Ahora vamos a controlar la posición de una imagen.

Hola mundo!!!

Este elemento tiene fondo!

También tenemos la opción dejar el fondo fijo

Hola mundo!!!

Este elemento tiene fondo!
Este elemento tiene fondo!
Este elemento tiene fondo!
Este elemento tiene fondo!
Este elemento tiene fondo!
Este elemento tiene fondo!
Este elemento tiene fondo!
Este elemento tiene fondo!
Este elemento tiene fondo!
Este elemento tiene fondo!

Background

Si queremos existe un atajo para escribir el código.

Todas las propiedades escritas en una sola línea.

El orden en el cual debe escribirse el código es:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

No importa que no escribas un valor siempre y cuando se siga este orden.

¿Utilizarás esta herramienta?

Deja un comentario