Fondos

Utilizar una imagen como fondo

En este caso no vamos a utilizar una imagen como de fondo como mosaico, sino que la vamos a utilizar como fondo sólo de la parte superior de la web, evitando que se repita y colocándola en la posición que deseamos.

Tenemos la siguiente imagen: (aquí se muestra reducida)

estilos.css

body{
   background:url("../img/fondo.jpg");
   background-repeat:no-repeat;
   background-color:#F9F1CF;
}

nav li{
   list-style:none;
   display:inline-block;
   padding:4px 70px;
   text-align:center;
   background-color:gray;
}

El selector 'body{' indica que el código CSS afectará al <body> (osea a toda la web).

Con background:url indicamos qué imagen se colocará de fondo y dónde se encuentra (el "../" inicial sirve para que pueda salir de la carpeta donde está el CSS que está leyendo y allí buscar la carpeta "img").

background-repeat indica que la imagen no se repita (sólo se mostrará una vez).

background-color especifica el color de fondo del resto de la web.

Para que funcione, es MUY importante especificar el color después de especificar la imagen.

El selector 'nav li{' ya existía (lo creamos en el tema 7 "Maquetación de enlaces con CSS").
En su momento añadimos la última línea como provisional, para que nos mostrará el área de cada <li> con un fondo gris:
background-color:gray;
Ahora que ya no necesitamos este fondo, eliminamos esta línea.

Con estos dos cambios podemos apreciar como la imagen de fondo NO se repite -y como es muy amplia- ocupa siempre todo el ancho de la ventana del navegador.

Haz clic aquí para o bien accede al siguiente tema donde vamos a