Estilo background-color

background-color nos ayuda a determinar el color de fondo de un determinado estilo. Por ejemplo, en el siguiente código podrás comprobar como le hemos puesto al fondo del estilo un color rojo.

Y el resultado lo podemos ver visualmente a continuación:

Estilo background-image

Gracias a este estilo, en lugar de un color de fondo como hacíamos anteriormente, podemos aplicar una imagen de fondo. El código se escribe de la siguiente manera:

La url será el nombre de la imagen con su camino relativo o absoluto.

Estilo background-repeat

Este atributo se usa para especificarle a la imagen que hemos usado de fondo si queremos o no que se repita y, en caso afirmativo, indicarle de qué modo queremos que se repita.

Si queremos que la imagen se repita en vertical y horizontal utilizaremos el atributo “repeat”, si queremos que la imagen se repita sólo en horizontal usaremos “repeat-x”.Y usaremos “repeat-y” para que se repita la imagen sólo en vertical. Si queremos que no se repita se lo indicaremos con “no-repeat”.

En el código siguiente veremos como a la imagen que hemos puesto de fondo en el estilo anterior, le hemos indicado que no se repita.

Estilo background-position

Gracias a este estilo de background podemos fijar el punto de inicio para la imagen de fondo. Mediante este atributo podemos fijar el punto de inicio verticalmente (top, center y bottom) y horizontalmente (left, center y right). Si expresamos dos coordenadas, la primera será la horizontal y la segunda la vertical.

En el siguiente código verás cómo hemos seguido con el ejemplo anterior, pero esta vez fijando también el punto: a la izquierda y arriba.

Si pinchas en el enlace siguiente, podrás ver el ejemplo completo: Ejemplo de estilo de fondos

Artículo escrito por Alberto Gómez para HazUnaweb.com. Queda absolutamente prohibida su reproducción.