CSS 201: Trabajar con Fondos

Aqui les enseño ya como maipular los fondos, ya sean colores, imagenes o ambos.

Aqui les enseño ya como maipular los fondos, ya sean colores, imagenes o ambos.

1 - Establecer un Color de Fondo

Para establecer un color de fondo solo tienes que tener a mano el color que quieres usar, y utilizarlo con el siguiente elemento de CSS:

Code:
El color se puede definir en una de tres maneras: Hex, RGB o Nombre. Les dare un ejemplo de lo que me refiero:

Code:
Como ven, es el mismo color de tres maneras diferentes. De las tres, la que menos les recomiendo es la de utilizar colores por nombres, ya que ahora mismo la cantidad disponible esta muy limitada. Sólo usen el RGB cuando no puedan obtener los colores en Hex, por ejemplo, si toman el color desde MS Paint. Yo uso Hex, porque es mas corto y sencillo. PhotoShop les da los valores de los colores en Hex y RGB, así que son libres de elegir el método que prefieran.

Si repiten el mismo elemento de HTML, el CSS le dará formato tal como esta definido. Supongamos que tengo un <h3>, el cual no quiero que tenga color de fondo. Entonces hacemos:

Code:
Puedes usar un estilo directo, o llamar a una clase que elimine el color de fondo

2 - Establecer Imagen de Fondo

Al igual que con el color de fondo, es muy sencillo utilizar esto. Lo unico que necesitamos es saber la ubicación, el nombre y la extensión de la imagen que queremos utilizar.

Code:
Ejemplo:
Code:
Suponiendo que no quieres una imagen de fondo en un <div> cualquier, hacemos:

Code:
Puedes usar un estilo directo, o llamar a una clase que elimine la imagen de fondo

3 - Como Posicionar Una Imagen de Fondo

Para posicionar la imagen de fondo en un lugar determinado se utilizamos lo siguiente:

Code:
Los parametros definen la posición horizontal y la vertical, de modo que: parametro1 -> vertical; parametro2 -> horizontal. Estos vienen ya predefinidos, en cierto modo, asi que aqui les dejo la lista de parametros.

• top left -> arriba izquierda
• top center -> arriba centro
• top right -> arriba derecha
• center left -> centro izquierda
• center center -> centro centro
• center right -> centro derecha
• bottom left -> abajo izquierda
• bottom center -> abajo centro
• bottom right -> abajo derecha

Ejemplo:
Code:
Aunque les he dado los parametros en este orden, estos pueden ser invertidos, de manera que podemos definir el parametro horizontal de primero y el vertical de segundo. Si decidimos definir un sólo parametro, el segundo será automaticamente asignado un valor de "center".

Ustedes dirán, asi que tenemos que usar estos parametros... y ¿que pasa si sólo quiero mover el fondo un poco a la derecha? Fácil, entonces usamos los parametro1 -> horizontal, parametro2 -> vertical (y estos si que no pueden ser invertidos).

• x-% y-% -> posición-horizontal posición-vertical (en %)
• x-pos y-pos -> posición-horizontal posición-vertical (en unidades de su elección)

De modo que, si queremos una imagen de fondo que esta un 30% (o 250px) alejado del limite izquierdo y 20% (o 175px) del limite superior hacemos esto (Nota La posición de la imagen no se mide desde los bordes de la página, sino que usa los valores de el elemnto en cual se encuentra.):

Code:

Como Repetir Una Imagen de Fondo

Indicar como hacer que el explorador interprete como repetir una imagen es muy sencillo, lo único que necesitamos es:

Code:
Los parametros a usar son:

- repeat: repetir en todas direcciones (valor por defecto).
- repeat-x: repetir horizontalmente nada más.
- repeat-y: repetir verticalmente nada más.
- no-repeat: no repetir.

Este elemento, cuando usado con el background-position deja crear composiciones interesantes, ya que, dependiendo de los especificado, la imagen de repite desde la posicón en que se encuentre.

Ejemplo:
Code:

Como Adjuntar el Fondo

Con este atributo podemos hacer que la imagen de fondo se mueva o no cuando la ventana hace scroll, de manera, que si elegimos que no se mueva, el texto se deslizará por encima de la imagen. Para esto necesitas el siguiente código:

Code:
Los parametros que puedes utilizar son:
- scroll: permite que la imagen de fondo se mueva (si no especificas nada, se toma este paramtero por defecto).
- fixed: fija la imagen de fondo para que no se mueva.

Ejemplo:
Code:

Sinopsis

Bueno, espero que hayan entendido todo eso, ya que de verdad esta muy sencillo. Ahora ya saben como manipular las imagenes de fondo y los colores. Un tip: pueden usar un color de fondo e una imagen a la vez. Pero recuerden que la imagen de fondo tiene preferencia sobre el color. Sin embargo, si centramos una imagen de fondo y no la repetimos y aplicamos un color de fondo, tendrán la imagen de fondo en el centro y en el resto del espacio será llenado con el color de fondo.