Lección 4. Color e Imagen de fondo
Materiales: Una imagen que os sirva para el fondo

Guardar vuestra imagen de fondo en la carpeta imagenes que habíamos creado, en mi caso la llamo fondo.jpg

Aunque podemos poner el fondo a cada una de las paginas vamos a ver la utilidad de esta hoja de estilos

Con este sistema damos unas características que serian las mismas para toda nuestra web, o creamos varias hojas de estilos para que cada parte de una web tenga propiedades deferentes.

Este método aparte de lo que os comente antes de que conseguimos bajarle peso a nuestra pagina tiene otro, si nos cansamos modificando la hoja de estilo cambiara el aspecto completo de nuestra web y no tendríamos que modificar todas las paginas.

Abrimos nuestra index y picamos en la pestaña de estilos

Para dar características a una etiqueta simplemente en la hoja de estilos pondríamos el nombre de la etiqueta y entre corchetes { } todas las características que queramos

La característica que define el fondo es el background cuya traducción es fondo

Para dar un color a nuestro body empleariamos la etiqueta background-color de la siguiente manera

Elegimos un color para nuestra web

AQUI tenéis un catalogo que igual os es útil para esto, elegir vuestro color de fondo y en nuestra hoja de estilos escribimos esto para darle las características a todo lo que este en el body y empezamos por el color.

Fijaros que encerramos entre corchetes la primera característica, cambiar el color por el que hayáis elegido y terminamos cada propiedad con punto y coma, os dejo además la captura para que vayais viendo como vamos dejando la hoja de estilos

body {background-color: #FFF8DC;}

Guardar cambios y vamos a la vista previa de nuestra index y veremos como el color del fondo cambió

Si queremos poner una imagen de fondo la propiedad sería background-image y tendríamos que escribirlo en la hoja de estilos a continuacion del estilo escrito anteriormente

Para darle la dirección de nuestra imagen tendríamos que escribir el nombre de la carpeta y a continuacion el nombre de la misma, en nuestro caso la url sería "imagenes/fondo.jpg"

En el Dream siempre que empezamos a escribir salen para ir autocompletando las diferentes frases, por lo tanto escribimos background-image: y pulsamos en examinar, ver la captura

Localizamos la carpeta donde tenemos guardado nuestro fondo y aceptamos

Recordar poner el punto y coma detras de cada característica

Guardamos los cambios y observamos la vista previa, ya tiene una imagen de fondo nuestra Web

Subimos nuestra hoja de estilos a nuestro hosting y la imagen que usamos para nuestro fondo

Tutorial realizado por Energiaelca

Derechos reservados