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:

captura-de-pantalla-de-2017-01-13-085321

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

 

captura-de-pantalla-de-2017-01-11-134552

 

c1

Anuncios
Esta entrada fue publicada en Uncategorized. Guarda el enlace permanente.

Una respuesta a Imágenes de fondo en CSS

  1. Bonita entrada lauri, sigue así loquita bss 🙂

    Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s