Archivo de la etiqueta: fondo

Imágenes de fondo en CSS


Para incluir imágenes de fondo en CSS utilizaremos las propiedades background-image para indicar la ruta de la imagen, background-position para establecer la alineación vertical y horizontal de la imagen y background-repeat.

El uso de background-repeat se debe a que si la imagen es más pequeña que el elemento se repetirá por defecto, horizontal y verticalmente hasta ocupar todo el espacio disponible. Si queremos modificar este comportamiento, se puede hacer con los valores no-repeat (no se repite), repeat-x (se repite horizontalmente) y repeat-y (se repite verticalmente).

Asimismo, con la propiedad background-size especificaremos el tamaño de la imagen.

De esta forma hemos diseñado una web con imágenes de la Mezquita de Córdoba, creando tres bloques <div> de 200px de ancho y 200px de alto. Hemos asignado a cada uno de los bloques una imagen de fondo de 50×50 y un borde distinto. Además, se cumplen los siguientes requisitos:

  • En el primer bloque la imagen de fondo no se repite y está centrada tanto vertical como horizontalmente.
  • En el segundo bloque, la imagen se repetirá horizontalmente y estará situada en la parte inferior.
  • En el tercer bloque, la imagen se repetirá verticalmente y se situará a la derecha.

El resultado es el que aparece en la imagen de abajo.

act1p79

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

htmlact1p79

cssact1p79