Cómo poner un FONDO o Background en CSS

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

Las propiedades de background

CSS tiene varias propiedades para darle efectos al fondo:

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

background-color

Esta propiedad te permite poner un color de fondo

See the Pen CSS | 1.6 - Backgrounds - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

background-image

Esta propiedad te permite poner una imagen de fondo

See the Pen CSS | 1.6 - Backgrounds - 2 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

background-repeat

Por defecto la propiedad background-image hace que la imagen se repita horizontal y verticalmente.

Con background-repeat podemos controlar como la repetimos.

See the Pen CSS | 1.6 - Backgrounds - 3 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

También podemos hacer que no se repita

See the Pen CSS | 1.6 - Backgrounds - 4 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

background-position

Especifica la posición de la imagen de fondo

See the Pen CSS | 1.6 - Backgrounds - 5 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

background-attachment

Especifica si la imagen debería ser fija o hacer scroll con el resto de la página

See the Pen CSS | 1.6 - Backgrounds - 6 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

background

Con la propiedad background se pueden unir todas las anteriores en una sola. En este orden:

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

See the Pen CSS | 1.6 - Backgrounds - 7 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats