Poner imagen de fondo en nuestra página

La propiedad background es un atajo para definir los valores individuales del fondo en una única regla CSS.

Colocaremos una imagen de fondo. Para ello empezamos con el listado HTML que servirá como ejemplo, para ello copia el listado en tu editor de texto favorito y guárdalo como fondo.html:

Para la imagen usaremos esta de abajo, solo tienes que dar click derecho en el ratón y guarda la imagen en la misma carpeta donde está este ejemplo:

 

 

Por último escribiremos las reglas en un archivo CSS que llamaremos css3.css:

Veamos el resultado:

Se puede usar background para definir los valores de una o de todas las propiedades siguientes: background-attachment, color, image, position, repeat.

  • background-attachment.- Si se especifica una imagen de fondo con background-image, background-attachment determina si la imagen será fija dentro de la pantalla o se desplazará junto al bloque contenedor.
    1. scroll.- la imagen de fondo se moverá dentro de la pantalla junto al bloque que la contiene.
    2. fixed .- la imagen de fondo estará fija en la pantalla y no se moverá con el bloque contenedor.
  • background-color.- Esta propiedad CSS define el color de fondo de un elemento, puede ser el valor de un color o la palabra “transparent“.
    1. color.- Podemos  especificar el color del fondo como un valor RGB hexa-decimal o regular, o utilizando una de las palabras claves predefinidas de color.
    2. transparent.- El valor por defecto del color de fondo (background-color) es transparente tomando así el color del elemento que está justo debajo de él en el apilamiento.
  • background-image.- Esta propiedad define la imagen de fondo de un elemento.
    1. url.- Localización de la imagen que se utilizará de fondo.
    2. none.- Utilizado para especificar que un elemento no debe tener ninguna imagen de fondo.
  • background-position.-  Define la posición inicial de la imagen de fondo especificada.
    1. percentaje.- Con el par de valores ‘0% 0%’, la esquina izquierda de la imagen es alineada con la esquina izquierda del borde del espaciado de la caja. Un valor ‘100% 100%’ pone la esquina inferior de la imagen en la esquina inferior del área de espaciado. Con un valor ‘14% 84%’, el punto a 14% a la derecha y 84% abajo de la imagen es colocado en el punto al 14% derecha y 84% abajo del área de espaciado.
    2. length.- con un valor ‘2cm 1cm’, la esquina superior izquierda de la imagen es colocada a 2 cm a la derecha y a 1cm debajo de la esquina superior izquierda del área de espaciado.
    3. top left y left top.- Es igual a ‘0% 0%’.
    4. top, top center y center top.- Es igual a ‘50% 0%’.
    5. right top y top right.- Es igual a ‘100% 0%’.
    6. left, left center y center left.- Es igual a ‘0% 50%’.
    7. center and center center.- Es igual a ‘50% 50%’.
    8. right, right center y center right.- Es igual a ‘100% 50%’.
    9. bottom left y left bottom.- Es igual a ‘0% 100%’.
    10. bottom, bottom center y center bottom.- Es igual a ‘50% 100%’.
    11. bottom right y right bottom.- Es igual a ‘100% 100%’.
  • background-repeat.- Especifica si la imagen es repetida (mosaico) y de que manera.
    1. repeat.- la imagen es repetida horizontal y verticalmente.
    2. repeat-x.- repetición únicamente en horizontal.
    3. repeat-y.- repetición únicamente en vertical.
    4. no-repeat.- no hay repetición: muestra solamente una imagen.

Ensaya todos estos ejemplos con el fin de ir cogiendo soltura en el uso de background.

Anuncios