Índice

Imágenes de fondo

1. Aplicar una imagen de fondo

Esta propiedad inserta una imagen de fondo dispuesta de forma clásica, es decir, en mosaico.

background-image:

url(archivo_imagen);

none;

Comentarios

  • Es posible utilizar una dirección relativa o absoluta para especificar la ruta (URL) de la imagen.

  • Las imágenes pueden tener los formatos GIF, JPEG o PNG.

  • El valor none no muestra ninguna imagen de fondo.

Ejemplo

Agregar una imagen de fondo a la página (presentación clásica).

<!DOCTYPE html>  
<html lang="es">  
<head>  
   <title>Html5</title>  
   <meta charset="UTF-8">   
   <style type="text/css">  
   body { background-image: url(burbujas.jpg);}    
   </style>  
</head>  
<body>  
</body>  
</html>
images/cap16img03.png

La imagen burbujas.jpg está disponible en el área de descargas.

2. Repetición de la imagen

Esta propiedad le da el control al diseñador en cuanto a la repetición de la imagen, para no tener que disponerla necesariamente en mosaico.

background-repeat:

repeat;

repeat-x;

repeat-y;

no-repeat;

Comentarios

  • Esta declaración de estilo solo tiene efecto si la imagen de fondo se ha definido mediante la propiedad background-image: url(archivo_imagen).

  • El valor repeat repite la imagen horizontal y verticalmente. El resultado es el clásico, ...