Propiedad Background

La propiedad Background CSS Una propiedad usada a menudo en css. Una de las más comunes es  background-image, que se encarga de mostrar la imagen de fondo de un elemento.

background asimila solo un valor y es uno de estos tres, URL, none o inherit, su valor inicial es none, y no se hereda

 La imagen que muestra se coloca en el area  que ocupan el contenido  del elemento  hasta copar todo, hasta el borde.

En el caso de que se importe una imagen se usa el patrón URL, que asimila lo mismo  URIs que URLs, ya sean  externas , internas,   relativas o absolutas, según el caso.

Para recoger la URL que conduce a la imagen el formato es  url(direccion), además permite que la dirección como tal se encierre entre comillas, ya sean estas dobles o sencillas

Veamos un ejemplo:

  
 div {
   background-image: url(http://www.mipaginadeimagenes.net/banco/css/imagenes/logo.png);
 }
  
 h2, h3, h4, h5 {
   background-image: url("imagenes/retrato.png");
 }
  
 h2, h3, h4, h5{
   background-image: url('../imagenes/arte.gif');
 } 

Distribucion:

Cuando la imagen de fondo es más grande que el area donde queremos mostrarla, se vera solo la parte que va desde  esquina superior izquierda  a su opuesto y lo hara justo en la esquina superior izquierda del espacio que ocupa el elemento que recibe la imagen:

Si sucede al revés y la imagen es más pequeña que el espacio reservado para ella, el navegador la repetirá,  en todas las direcciones hasta cubrir completamente el espacio del elemento.

Para ayudar a resolver estos dentro de background existen diferentes opciones como   background-repeat,  que permitirá que la imagen se repita o no, background-attachment, permite que se mantenga fija en un su posición o se desplace cuando se mueve el cursor y   background-position, que brinda la posibilidad de modificar la posición por defecto e la imagen

La propiedad Background puede usarse simultáneamente en un area, por ejemplo un div junto a un color de fondo, por  eso es común ver background-image y background-color en un mismo espacio o elemento. En estos casos la imagen tiene prioridad, y el color de fondo solo será visible en aquellas areas de la imagen que sean transparentes por ejemplo al usar imágenes en formato png o en aquellas zonas que no estén cubiertas por la imagen

Usar ambas es una buena práctica, porque permite tener desde el primer momento algo que cubra el elemento. Considerando que puede haber demora en cargar la URL, o un fallo, que exista un color de fondo con una apariencia parecida a la imagen (si fuera posible),  mejorar la experiencia.

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

…., si avanzo sígueme, si me detengo empújame, si retrocedo mátame…….

Translate »