CSS: background-image no muestra la imagen con URL relativa
Yo aprendí a programar HTML en el año 1995, cuando no existía el CSS ni menos los editores WYSIWYG.
Hoy en día no es mucho lo que programo, pero es un hobby que me gusta mantener y de vez en cuando trato de “meter las manos” en el código.
Hoy estuve unos momentos con algo que no me pareció directa la solución y quiero compartir con uds:
Tenía un CSS con un código background-image pero no me cargaba la imagen si es que tenía la ruta de la imagen de forma relativa. Por ejemplo tenía esto en el CSS:
.popup { background-image: url(images/superior.png); }
pero si funcionaba con
.popup { background-image: url(/images/superior.png); }
Lo que ocurre es que las rutas que uno coloque dentro de un archivo CSS es relativa a donde está ubicado el CSS
Como el archivo css lo tengo ubicado en la carpeta “css” , de la siguiente forma: “css/archivo.css” y la imagen está en “images/superior.png” lo correcto a colocar de forma relativa es:
.popup { background-image: url(../images/superior.png); }
ya que esa es la ruta relativa desde la carpeta “CSS” a la carpeta “IMAGES”
interesante y funciona!.
Noviembre 24th, 2010 at 11:44
gracias por el dato, tenia un buen rato con eso problema q ahora podre resolver
Grax
Enero 10th, 2013 at 18:39
Claro que eso era, no me di cuenta y tenia rato con ese problema gracias
Junio 2nd, 2013 at 04:02
Gracias por el comentario, a mi me ha valido también.
Agosto 30th, 2016 at 01:44
Gracias bro!! 😀 en verdad llebaba rato con eso :/
Septiembre 29th, 2016 at 15:43
que buena tip la verdad
Octubre 2nd, 2016 at 14:17
Gracias, me ayudó bastante 🙂
Octubre 9th, 2016 at 20:48
MIL GRACIAS GENIO!!!
me re salvaste con un trabajo que tengo que entregar, no entendia por que no me tomaba las imagenes el css.
gracias
Mayo 14th, 2017 at 17:52
Gracias, era un detallito mínimo, no tenía rato batallando con eso también, no recordaba los .. y / para subir un directorio 🙂
Febrero 8th, 2018 at 18:03
genial maestro tuve danto vueltas y me diste la sucion
Mayo 18th, 2018 at 07:13
Gracias me volví loco hasta que me diste la solución
Septiembre 9th, 2019 at 22:17
TE AMO! <3 <3 por fiiiiinn una soolución!!!!
Noviembre 24th, 2020 at 15:57
Excelente la explicación dada respecto a la url en backgroud-image..
desde Venezuela. 24/11/2020.. GRacias
Febrero 9th, 2021 at 13:54
Muy agradecido por aporte, que me fue de gran ayuda…
Junio 25th, 2021 at 22:55
Muchas gracias 🙂