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…….