Tutorial css Sobre Fondos para Principiantes

FONDOS

Ahora que ya sabemos como funciona y para que sirve voy a dar mas parámetros, (fondos).

-background-color:
-background-image:
-background-repeat
-background-attachment
-background-position

background-color
color de fondo

Sirve para poner un color de fondo al elemento que queramos por ejemplo a body y h1 como hemso visto antes

body {background-color: silver;} h1 {background-color: red;}
Background-image

Se utiliza para cuando queramos meter una imagen de fondo. Si queremos que la imagen aparezca como fondo de la web deberemos aplicárselo al elemento quedando asi:

body {background-color: silver; background-image: url(“fotos/imagen.gif”);} h1 {background-color: red;}
NOTA: También se puede poner imágenes de Internet y lo indicaremos como url(http://www.unaweb.com/imagen.gif)

background-repeat
repetición de la imagen de fondo

si has hecho el ejemplo anterior con una imagen que no sea muy grande te habras dado cuenta que la imagen se repite tanto verticalmente como horizontalmente pero esto se puede controlar con background-repeat.

Elemento {background-repeat: repeat-x} la imagen se repite solo en el eje horizontal.
Elemento {background-repeat: repeat-y} la imagen se repite solo en el eje vertical.
Elemento {background-repeat: repeat} la imagen se repite tanto en el eje horizontal y vertical.
Elemento {background-repeat: no-repeat} la imagen no se repite

Veamos ahora un ejemplo:

Background-attachment
Fijar la imagen de fondo

Esto es para indicar si queremos que una imagen sea fija o no. Una imagen de fondo fija no se moverá con el texto cuando el lector se desplace por la página, mientras que una imagen de fondo no fija se desplazará con el texto de la página web.

Para que lo entendáis mejor: si ponemos una imagen en la parte superior izquierda y le indicamos que sea fija, por mucho que nos desplacemos con la barra de desplazamiento (scroll) hacia la parte inferior de la web para ver el contenido la imagen siempre aparecerá en pantalla en la parte superior izquierda. Mientra que si le decimos que no sea fija en cuanto bajemos para ver el contenido la imagen ira subiendo con el contenido.

{background-attachment: scroll;} la imagen se desplaza con pagina. No esta fija
{background-attachment: fixed;} la imagen esta fija

Ejemplo:

body {background-color: silver; background-image: url(“fotos/imagen.gif”); background-repeat: no-repeat; background-attachment: fixed;} h1 {background-color: red;}
Background-position
Posicionar la imagen de fondo

Por defecto una imagen se posiciona el la parte superior izquierda pero con backgroun-position podremos ponerla donde nosotros queramos y se debe indicar de la siguiente manera:

{Background-position: valor1 valor2}

El valor1 se refiere al espacio que dejaremos del margen izquierdo.
El valor2 se refiere al espacio que dejaremos del margen superior.

Se pueden usar varios valores para las distancias “px” (pixeles), % (porcentaje), cm (centímetros), o sino tambien se puede usar "top" (superior), "bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha).

Ejemplos:

{backgroud-position: 1cm 2cm;} la imagen se posiciona 1 cm del margen izquierdo y a 2 cm del margen superior.
{background-position: 50% 10%;} la imagen se posiciona en el centro al 10% del margen superior.
{background-position:bottom right;} la imagen se posiciona en la esquina inferior derecha.

Para posicionar una imagen en la esquina inferior derecha en código seria así:

body {background-color: silver; background-image: url(“fotos/imagen.gif”); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom right} h1 {background-color: red;}
NOTA: fijaros que entre los dos valores para dar las coordenadas se separa simplemente con un espacio no se pone ni como ni punto y coma ni nada.

Y con esto acabamos la parte de fondos