Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

3. Insertar imágenes (V)

3.5 Imagen de fondo

Copiar imagen

En este paso vamos a insertar una imagen de fondo que, a modo de mosaico, ocupe toda la pantalla, se recomienda buscar imágenes claras para que no impidan la lectura de la página (sobre todo si el texto está en letras oscuras). Nosotros hemos elegido la siguiente imagen:

Para copiar la imagen pulsa con el botón derecho del ratón encima de la imagen, y en el cuadro de menú pulsa sobre "guardar imagen como...". En la ventana que aparece, buscamos la carpeta "objetos" dentro de la carpeta raíz de nuestra web, para guardarlo ahi. (la ruta para guardarlo será: "Mis documentos / mi_web /objetos ). Donde pone "nombre", escribimos fondo y pulsamos en Guardar. Si te has fijado, donde pone "tipo", vemos que el archivo de imagen tiene la extensión ".gif".

Colocar la imagen

Abre el archivo estilo.css con el bloc de notas y en la última línea (la que empieza por body), añadimos lo siguiente

body { background-color: rgb(239,226,254);
background-image: url("objetos/fondo.gif");}

Como puedes ver el texto añadido es el que está en color verde, el otro es el que ya teníamos. La propiedad background-image inserta una imagen de fondo, que en principio, se repite en horizontal y en vertical por todo el fondo del elemento seleccionado (en este caso el "body", es decir, la página). Como puedes ver, su valor es siempre url seguido de la ruta de la imagen, que debe ir escrita entre parentesis, y dentro de éstos, entre comillas: background-image: ("ruta_de _la_imagen");

El archivo estilo.css quedará de la siguiente manera:

 
h1 { text-align: center; font-size: 2.5em; font-family: verdana; color: purple }
h2 { text-align: center; font-size: 1.9em; font-family: "times new roman"; color: olive; }
p { text-align: justify; font-size: 1.1em; font-family: arial; color: navy;
    padding-left: 3em ; padding-right: 3em ; padding-top: 0.5em ; text-indent: 2.5em; }
.dibujo { float: right; margin-left: 2em; margin-right: 3em; margin-bottom: 1em; }
body { background-color: rgb(239,226,254);  background-image: url("objetos/fondo.gif"); }

Una vez copiada la propiedad en el archivo estilo.css, guardamos y cerramos el bloc de notas. y después abrimos el archivo index.html con el navegador para comprobar el resultado.

Tu página Web debe tener el siguiente aspecto: Ver mi Web.

Como siempre si el resultado no es éste, revisa los códigos anteriores, y busca si hay algún error.

Como has observado, la propiedad background-image tiene prioridad sobre la propiedad background-color; sin embargo ésta última no la borramos, ya que en caso de que no se vea la imagen, o ésta tarde en cargarse, veremos el color de fondo.

En el siguiente tema aprenderemos a poner enlaces a otras Webs, y a hacer listas.

Pasamos al siguiente tema:

Lista con enlaces

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com