Imágenes de fondo en CSS

En esta entrada voy a mostrar una práctica realizada en clase en la cual hemos insertado imágenes de fondo en CSS.

Para ello hemos utilizado una serie de propiedades:

• width: anchura
• height: altura
• border: añadir un tipo de borde a la imágen
• background-image:url(‘enlace de la fotografía’);
• background-repeat:dependiendo de si quieres que se repita en horizontal y vertical añades el correspondiente.
• background-position:posición de la imagen;

 

Con estas propiedades hemos realizado una web con imágenes las cuales son de temática canina. Está formada por  3 <div> de 200px de ancho y 200px de alto. Incluyendo cada una de estas una imagen de fondo de 70px y un borde distinto.

Además podemos ver que:

1. En la primera <div> encontramos una única foto centrada.
2. En la segunda <div> encontramos una serie de imágenes en la parte inferior y estas se repiten horizontalmente.
3. En la tercera <div>encontramos una serie de imágenes e n la parte derecha y estas se repiten verticalmente.

 

El resultado es el mostrado a continuación:

El código CSS  y HTML para obtener este resultado se muestra a continuación.

 

 

Anuncios