Búsqueda personalizada
 
 
 
 
Propiedades relacionadas al fondo (background)
 

Hasta ahora hemos probado y utilizado la propiedad background-color para fijar el color de fondo del contenido de una marca HTML (body, h1, h2, p, etc.).
Hay otras propiedades relacionadas al fondo que nos permiten, entre otras cosas, disponer un archivo de imagen.

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

Veamos un ejemplo de disponer una imagen sobre el fondo de la pgina:

<html> 
<head> 
<title>Problema</title> 
<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. Como se encuentra en la carpeta inmediatamente superior debemos indicar con ../
La imagen se repite en x e y hasta llenar la pgina 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 otras marcas HTML (h1,h2,h3,p, etc.).

La ltima propiedad background-position podemos indicar la posicin de la imagen segn 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 pxeles 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.

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion