Listado completo de tutoriales

19 - Propiedades relacionadas al fondo (background)


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);
}
background-image background-repeat

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.


Retornar