Hasta ahora hemos probado y utilizado la propiedad background-color para fijar el color de fondo del contenido de un elemento HTML (body, h1, h2, p, etc.).
Hay otras propiedades relacionadas al fondo que nos permiten, entre otras cosas, disponer un archivo de imagen. Las propiedades relacionadas al background y sus valores son:
background-color background-image background-repeat background-position background-attachment
Veamos un ejemplo de disponer una imagen sobre el fondo de la página:
<!DOCTYPE html> <html> <head> <title>Problema</title> <meta charset="UTF-8"> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> </body> </html>
La hoja de estilo queda:
body {
background-image:url(fondo.jpg);
}
La única propiedad que hemos inicializado es background-image indicando el nombre del archivo de imagen a mostrar.
La imagen se repite en x e y hasta llenar la página por completo, ya que por defecto background-repeat está inicializada con el valor repeat, probar de modificar el estilo primero con:
body {
background-image:url(fondo.jpg);
background-repeat:repeat-x;
}
Luego con:
body {
background-image:url(fondo.jpg);
background-repeat:repeat-y;
}
Y por último:
body {
background-image:url(fondo.jpg);
background-repeat:no-repeat;
}
Tener en cuenta que podemos aplicar una imagen a otros elementos de HTML (h1, h2, h3, p, etc.)
La última propiedad background-position podemos indicar la posición de la imagen según los siguientes valores:
top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos
Para que tenga sentido esta propiedad debemos inicializar la propiedad background-repeat con el valor no-repeat.
Por ejemplo:
body {
background-image:url(fondo.jpg);
background-repeat:no-repeat;
background-position:20% 50%;
}
Dispone la imagen 20% avanzando desde la izquierda y 50% avanzando desde arriba.
La siguiente regla:
body {
background-image:url(fondo.jpg);
background-repeat:no-repeat;
background-position:400px 10px;
}
Dispone la imagen 400 pixeles desde la derecha y 10 píxeles desde arriba.
La regla:
body {
background-image:url(fondo.jpg);
background-repeat:no-repeat;
background-position:top right;
}
Dispone la imagen en la parte superior a la derecha.