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:
- En la primera <div> encontramos una única foto centrada.
- En la segunda <div> encontramos una serie de imágenes en la parte inferior y estas se repiten horizontalmente.
- 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
Bonita entrada lauri, sigue así loquita bss 🙂
Me gustaMe gusta