Background
El atributo background, nos permite colocar a toda la pantalla o alguna sección delimitada por algún elemento un fondo, sea este un color o una imagen.
A continuación realizaremos un pequeño ejemplo donde insertemos una imagen de fondo y coloquemos a un elemento <h1> y <p> un fondo de color.
Lo que veremos en el navegador será:
Paso a paso:
- Crearemos una página simple con un código como el siguiente:
<!DOCTYPE html><html lang="es"><head></head><body><h1>Usando el Atributo Background</h1><p>Este es un párrafo con un background de color.</p></body></html>
- Ahora usaremos la etiqueta <style> dentro de las etiquetas <head> y emplearemos el atributo background-image y background-color.
<!DOCTYPE html><html lang="es"><head><style>body{background-image: url(img/imagenbody.jpg);}h1{background-color: rgb(154,227,200);}p{background-color: #26FF00;}</style></head><body><h1>Usando el Atributo Background</h1><p>Este es un párrafo con un background de color.</p></body></html>
- En este ejemplo, la imagen que usamos emplea la extensión .jpg sin embargo recuerde que podemos ocupar las imágenes con la extensión (.png o .gif)
- Para emplear la imagen, cree una carpeta llamada img dentro del directorio de nuestra página y en ella guarde una imagen con el nombre "imagenbody.jpg", esto claro, con fines de este ejemplo.
- Después, dentro de las etiquetas de estilo, realice una referencia para el elemento body y emplee el atributo background-image tal como esta en el ejemplo.
- Después emplee el elemento url()
- Dentro de los paracentesis colocamos el vinculo sea, absoluto o relativo, de la dirección de la imagen.
- Para los elementos <h1> y <p> emplearemos el atributo background-color tal como fue empleado en el ejemplo
- Note que el elemento <h1> ocupa la notación de color rgb(), mientras que el elemento <p> ocupa la notación hexadecimal. Consulte la Lección 4 del curso de CSS3.
- Podemos emplear otros propiedades para el background tales como:
- background-size
- background-origin
- background-clip
- background-position
- background-attachment
- background-repeat
- Debe de tener en consideración el fondo que elija para su página:
- Que a imagen tenga relación con su contenido
- Que no se pierdan las letras entre el color del fondo y el color del texto
- Conservar el buen gusto
No hay comentarios:
Publicar un comentario