Las propiedades CSS (background)

Las propiedades CSS son las que nos permiten personalizar los sitios, darles ciertas características especiales, ajustar cada detalle de una página web.

Por lo general, las utilizamos incluyéndolas en una hoja de estilo externa (un archivo de extensión CSS), dentro de una etiqueta <STYLE> </STYLE> (o <b:skin> </b:skin> en Blogger) o como parámetro en una etiqueta usando style="".

A su vez, todas esas propiedades pueden establecerse o modificarse mediante JavaScript lo que las hace muy flexibles ya que podemos manejarlas a nuestro antojo. Un ejemplo que todos hemos visto es el de mostrar y ocultar elementos al hacer click; ¿cómo se hace eso?, cambiando las propiedades CSS.

Esta, es el primero de una serie de posts donde se mostrará, hasta donde sea posible, cuáles son las propiedades que podemos utilizar y cómo hacerlo.

Empezamos con una de las más usuales, la propiedad background.

La propiedad background establece todas y cada una de las propiedades que afectan al fondo de un elemento, al mismo tiempo. Es decir, la usamos para evitar escribir cada una de ellas por separado:
background-color | background-image | background-repeat | background-attachment | background-position

sintaxis en HTML
elemento {background: valores;}
por ejemplo: body {background: #FFCC80 url(imagen.jpg) no-repeat left top;}

sintaxis en JAVASCRIPT
elemento.style.background='valores';
por ejemplo: this.style.background='#FFCC80 url(imagen.jpg) no-repeat left top';

Donde el orden de los valores es: color image repeat attachment position
y por defecto son: transparent repeat scroll 0% 0%

La propiedad background-color establece el color de fondo de un elemento y por defecto su valor es transparent.

sintaxis en HTML
elemento {background-color: color | transparent;}
por ejemplo: body {background-color: #FFCC80;}

sintaxis en JAVASCRIPT
elemento.style.backgroundColor='color | transparent';
por ejemplo: this.style.backgroundColor='#FFCC80';

El color puede ser un nombre, un valor rgb(), un valor hexadecimal o transparent.

DEMO DEMO DEMO

La propiedad background-image establece la imagen de fondo de de un elemento.

sintaxis en HTML
elemento {background-image: url | none;}
por ejemplo: body {background-image: url(imagen.jpg);}


sintaxis en JAVASCRIPT
elemento.style.backgroundImage='url | none';
por ejemplo: this.style.backgroundImage='url(imagen.jpg)';

Al colocar una imagen de fondo, es conveniente establecer también un color que es el que se usará si la imagen no es accesible.

La propiedad background-repeat establece si la imagen de fondo de de un elemento se repite y si es así, cómo lo hace.

sintaxis en HTML
elemento {background-repeat: valor;}
por ejemplo: body {background-repeat: valor;}

sintaxis en JAVASCRIPT
elemento.style.backgroundRepeat='valor';
por ejemplo: this.style.backgroundRepeat='valor';

Donde los valores posibles son:
repeat (la imagen se repite horizontal y verticalmente) y es el valor por defecto
repeat-x (la imagen se repite horizontalmente)
repeat-y (la imagen se repite verticalmente)
no-repeat (la imagen no se repite)

La propiedad background-attachment establece si la imagen de fondo permanece fija o se desplaza mediante un scroll.

sintaxis en HTML
elemento {background-attachment: scroll | fixed;}
por ejemplo: body {background-attachment: scroll;}

sintaxis en JAVASCRIPT
elemento.style.backgroundAttachment='scroll | fixed';
por ejemplo: this.style.backgroundAttachment='scroll';

Linea 1 Linea 2 Linea 3 Linea 4 Linea 5 Linea 6 Linea 7 Linea 8 Linea 9

La propiedad background-position establece la posición inicial de imagen de fondo.

sintaxis en HTML
elemento {background-position: valor1 valor2;}
por ejemplo: body {background-position: left top;}

sintaxis en JAVASCRIPT
elemento.style.backgroundPosition='valor1 valor2';
por ejemplo: this.style.backgroundPosition='left top';

Los valores posibles son:
porcentaje | medida (positivos o negativos) ] {1,2} | 0% 0%
o bien: left | center | right | top | center | bottom

Estas son las equivalencias:
left top = 0% 0%
top = center top = 50% 0%
right top = 100% 0%
left = left center = 0% 50%
center = center center = 50% 50%
right = right center = 100% 50%
left bottom = 0% 100%
bottom = center bottom = 50% 100%
right bottom = 100% 100%

DEMO DEMO DEMO

MÁS INFORMACIÓN:

Un poco más allá de las imágenes (Parte 1)

Un poco más allá de las imágenes (Parte 2)