Fondos CSS

La propiedad background de CSS es usado para definir efectos de fondo para los elementos HTML.

Las variantes de la propiedad background de CSS son:

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

Color de Fondo

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

El color de fondo de una página es especificado de la siguiente manera:

body {
  background-color: lightblue;
}

En CSS, los colores se definen de diferentes maneras como a continuación se muestran:

• Un valor Hexadecimal como "#ff0000".
• Un valor RGB como: "rgb(255,0,0)".
• Un nombre de color valido como: "red".

En el siguiente ejemplo a los elementos HTML <h1>, <p> y <div> se le definen colores de fondo diferente:

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

Imagen de fondo

La propiedad background-image especifica una imagen para usarla como fondo para un elemento HTML.

Por comportamiento predeterminado la imagen es repetida para cubrir todo el elemento.

Un fondo de imagen para una página se especifica de la siguiente forma:

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

Imagen de Fondo - Repetir Horizontal o Vertical

Por comportamiento predeterminado, la propiedad background-image repite una imagen tanto horizontal como vertical.

En algunos casos las imágenes deberían de repetirse solo u horizontal o vertical, en estos casos podemos utilizar la propiedad

background-repeat.

En el siguiente ejemplo mostramos como especificar una imagen y sea repetida horizontalmente únicamente:

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

Para repetir una imagen verticalmente utilizamos background-repeat: repeat-y;.

Fondo de Imagen - definir la posición y no repetir

Mostrando la imagen de fondo una sola vez también esta especificado por la propiedad background: repeat:

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

En el ejemplo anterior, la imagen de fondo es mostrada en el mismo sitio del texto, es decir, cargado a la izquierda. Si queremos hacer un cambio y cargar la imagen a la derecha; lo podemos definir con la propiedad background-position:

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

Imagen de Fondo - Posición Fija

Para especificar que la imagen de fondo sea fija (que no se desplace con el resto de la página) utilice la propiedad background-attachment:

body {
  background-image: url(fondo.png);
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

Background - Propiedad abreviada

Para acortar el código, también es posible especificar todas las propiedades de fondo en una sola propiedad. Esto es llamada propiedad abreviada.

La propiedad abreviada para fondos es background:

body {
  background: #ffffff url(fondo.png) no-repeat right top;
}

Cuando usas la propiedad abreviada de background el orden de los valores es:

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

Si alguno de los valores no es definido no importa, siempre y cuando los demás sigan el orden.