Fondos CSS

Aprenda a cambiar el fondo de un elemento usando CSS

El fondo de un elemento se puede cambiar usando varias propiedades CSS:

  • background-color
  • background-image
  • background-clip
  • background-position
  • background-origin
  • background-repeat
  • background-attachment
  • background-size

y la propiedad taquigráficabackground, que permite acortar definiciones y agruparlas en una sola línea.

background-coloracepta un valor de color, que puede ser una de las palabras clave de color o unargbohslvalor:

p {
  background-color: yellow;
}

div { background-color: #333; }

En lugar de usar un color, puede usar una imagen como fondo de un elemento, especificando la URL de ubicación de la imagen:

div {
  background-image: url(image.png);
}

background-cliple permite determinar el área utilizada por la imagen de fondo o el color. El valor predeterminado esborder-box, que se extiende hasta el borde exterior del borde.

Otros valores son

  • padding-boxpara extender el fondo hasta el borde del acolchado, sin el borde
  • content-boxpara extender el fondo hasta el borde del contenido, sin el relleno
  • inheritpara aplicar el valor del padre

Cuando utilice una imagen como fondo, querrá establecer la posición de la ubicación de la imagen utilizando elbackground-positionpropiedad:left,right,centerson todos valores válidos para el eje X, ytop,bottompara el eje Y:

div {
  background-position: top right;
}

Si la imagen es más pequeña que el fondo, debe configurar el comportamiento usandobackground-repeat. Deberiarepeat-x,repeat-yorepeaten todo el eje? Este último es el valor predeterminado. Otro valor esno-repeat.

background-originle permite elegir dónde se debe aplicar el fondo: a todo el elemento, incluido el relleno (predeterminado) usandopadding-box, a todo el elemento, incluido el borde, utilizandoborder-box, al elemento sin el relleno usandocontent-box.

Conbackground-attachmentpodemos adjuntar el fondo a la ventana gráfica, para que el desplazamiento no afecte al fondo:

div {
  background-attachment: fixed;
}

Por defecto, el valor esscroll. Hay otro valor,local. La mejor forma de visualizar su comportamiento eseste Codepen.

La última propiedad de fondo esbackground-size. Podemos utilizar 3 palabras clave:auto,coverycontain.autoes el predeterminado.

coverexpande la imagen hasta que todo el elemento queda cubierto por el fondo.

containdeja de expandir la imagen de fondo cuando una dimensión (xoy) cubre todo el borde más pequeño de la imagen, por lo que está completamente contenida en el elemento.

También puede especificar un valor de longitud y, si es así, establece el ancho de la imagen de fondo (y la altura se define automáticamente):

div {
  background-size: 100%;
}

Si especifica 2 valores, uno es el ancho y el segundo es la altura:

div {
  background-size: 800px 600px;
}

La propiedad taquigráficabackgroundpermite acortar definiciones y agruparlas en una sola línea.

Esto es un ejemplo:

div {
  background: url(bg.png) top left no-repeat;
}

Si usa una imagen y la imagen no se pudo cargar, puede establecer un color de respaldo:

div {
  background: url(image.png) yellow;
}

También puede establecer un degradado como fondo:

div {
  background: linear-gradient(#fff, #333);
}

Descarga mi gratisManual de CSS


Más tutoriales de CSS: