Backgrounds CSS

Las propiedades de fondo de CSS se utilizan para agregar efectos de fondo a los elementos.

background-color

La propiedad background-color especifica el color de fondo de un elemento.

Ejm

body {
  background-color: lightblue;
}

Con CSS, un color suele especificarse mediante:

• un nombre de color válido, como «red»
• un valor HEX – como «#ff0000»
• un valor RGB – como «rgb(255,0,0)»

Puedes establecer el color de fondo para cualquier elemento HTML:

Ejm

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

Opacidad / Transparencia

La propiedad opacity especifica la opacidad/transparencia de un elemento. Puede tomar un valor de 0.0 – 1.0. Cuanto menor sea el valor, más transparente:

Ejm

div {
  background-color: green;
  opacity: 0.3;
}

Nota: cuando se usa la propiedad opacity para agregar transparencia al fondo de un elemento, todos sus elementos secundarios heredan la misma transparencia. Esto puede hacer que el texto dentro de un elemento completamente transparente sea difícil de leer.

Transparencia usando RGBA

Si no deseas aplicar opacidad a los elementos secundarios, como en nuestro ejemplo anterior, usa valores de color RGBA. El siguiente ejemplo establece la opacidad para el color de fondo y no para el texto.

Un valor de color RGBA se especifica con: rgba(rojo, verde, azul, alfa). El parámetro alfa es un número entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).

Ejm

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

background-image

La propiedad background-image especifica una imagen para usar como fondo de un elemento. De forma predeterminada, la imagen se repite para que cubra todo el elemento.

Ejm

body {
  background-image: url("paper.gif");
}

Nota: cuando utilices una imagen de fondo, utiliza una imagen que no interfiera con el texto

background-repeat

Por defecto, 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. Para repetir la imagen horizontalmente se utiliza la siguiente sintaxis.

Ejm

body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

Para repetir la imagen verticalmente se utiliza la siguiente sintaxis.

Ejm

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-y;
}

Para mostrar el fondo de imagen tan sólo una vez se utiliza la siguiente sintaxis.

Ejm

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

background-position

La propiedad background-position se utiliza para especificar la posición de la imagen de fondo.

Ejm

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Valores de la propiedad background-position