background: Los fondos y lo standard

Establecer el fondo de una etiqueta cualquiera es algo bastante común y no debería causar problemas si conocemos a forma en que funciona esta propeidad que, genéricamente, se define con background, con ella, podemos establecer tanto un color de fondo como una imagen de fondo a todas las etiquetas, a un elemento identificado con un ID o a una clase; todas estas reglas harán que el color de fondo sea blanco:

body { background: #FFFFFF; }
#unelemento { background: #FFFFFF; }
.unaclase { background: #FFFFFF; }

y todas estas harán se muestre una imagen de fondo:

body { background: url(miimagen); }
#unelemento { background: url(miimagen); }
.unaclase { background: url(miimagen); }

El color, puede ser expresado en cualquier formato, ya sea una palabra (white en este caso), como hexadecimal (#FFFFFF o #FFF) o como RGB escribiendo rgb(255,255,255); si es una imagen, el valor dentro de url() debe ser la dirección de esa imagen es decir, dónde está alojada y en Blogger, debe ser absoluta, comenzar con http:// o https://

background: white;
background: #FFFFFF;
background: rgb(255,255,255);
background-color: white
background-color: #FFFFFF;
background-color: rgb(255,255,255);

background:url(una_imagen);

Por defecto, si usamos background, el navegador completará las propiedades restantes ya que esa es una forma de escribir de modo resumido, una serie de propiedades distintas que se controlan distintos parámetros de manera individual. Si sólo agregáramos color, la etiqueta completa sería algo así, aunque el orden interno puede variar:

#unelemento { background: #FFF url() repeat scroll 0 0; }
#unelemento { background: url() repeat scroll 0 0 #FFF; }

Cada una de esas partes puede ser declarada de modo individual:

background-color es el color de fondo y se agrega aún cuando se quiera mostrar una imagen por dos motivos, el primero es que si la imagen es transparente, podemos darle efectos colocando un color distinto al fondo y si no lo es, ese es el color que se mostrará cuando la imagen no se cargue o demore en ser cargada; de ese modo, si hay textos, estos serán legibles.

background-image indica la dirección URL de la imagen a usar y si queremos eliminarla, la dejamos vacía con url() o usamos la palabra none.

background-repeat establece la forma en que tratará la imagen; por defecto el valor es repeat así que la imagen se repetirá como un mosaico en todas direcciones hasta ocupar el ancho y alto del elemento al que lo agregamos; esto es lo que solemos hacer para llenar un determinado espacio con una imagen pequeña. Un valor de no-repeat hará lo contrario, la imagen no se repetirá y es lo que usamos para mostrar un logo o cosas similares. Los otros dos valores posibles son repeat-x y repeat-y que "repiten" la imagen como mosaico pero sólo un una dirección, la primera, horizontalmente y la segunda, verticalmente.

repeat

no-repeat

repeat-x

repeat-y

En realidad, existen otros valores posibles para esa propiedad (space y round) pero, aún no han sido incorporados a los navegadores y sólo funcionan en Opera y en IE9 o superior.

background-position son dos valores que indican en que posición comenzará a ser mostrada esa imagen de fondo y por defecto es 0 0 o left top, la imagen empezará en la parte superior izquierda. Para indicar esa posición podemos usar palabras (top right bottom left), porcentajes o pixeles; por ejemplo, si quisiéramos centrarla usaríamos 50% 50%;

0 0

right bottom

50% 50%

30px 50px

background-attachment admite dos valores, scroll es el que tiene por defecto y el que usamos habitualmente; fixed hará que la imagen quede fija, que ese fondo, permanezca estático cuando hacemos scroll sobre la página y, sólo tiene sentido usarlo si el fondo a llenar es más alto que la ventana del navegador, caso contrario, no veremos diferencia alguna; hagamos la prueba permutando el fondo del blog por una imagen y viendo las diferencias::

scroll | fixed | restaurar