¿Por que no se ve mi imagen si la cargo desde CSS?
12 seguidores
Saludos:
Antes de nada un saludo a todos.
La cosa es que cuando intento meter una imagen para que sea cargada en mi web desde CSS y esta no me sale... para que pueda verla sin problemas tengo que cargarla desde el propio HTML en su correspondiente "DIV". No se si esto es lo normal o no y de ahí me pregunta.
Aquí os dejo como lo hago:
#contenedor_foto {
width: auto;
height: 500;
background-image:url(file:///"ruta de la imagen")
}
Gracias!
rubenferlo Profesor Plus
¿Cómo estás poniendo la url?
JMSR - Huanma Sáenz
background-image: url(file:///D|/Webs/FLASH%20web%20clan/images/logo_fondo.png);
Así por ejemplo.
rubenferlo Profesor Plus
No se si será por trabajar en local, subela al servidor y prueba.
rubenferlo Profesor Plus
Prueba a ponerlo así: height: 500px;
JMSR - Huanma Sáenz
Sigo sin ver las imágenes incluso subiendo los archivos al servidor... Voy a intentar explicarme algo mas para a ver si así damos con el problema.
Yo siempre he puesto las imágenes en el HTML por una cuestión de comodidad a la hora de diseñar la web pero no así a la hora de modificar las mismas por diversos motivos. El caso es que ahora quiero tener estas imágenes en una hoja CSS y cargarlas de esta manera al HTML y así a parte de tenerlo todo mucho mas organizado me será mas sencillo de actualizar en su momento.
Os pongo aqui un ejemplo de la CSS que contiene todas las imagenes:
#imagen_1 {
width: 140px;
height: 100px;
background-image: url(file:///D|/Webs/web_clan_svt40/images/noticia1.jpg);
background-repeat: no-repeat;
}
#imagen_2 {
width: 140px;
height: 100px;
background-image: url(file:///D|/Webs/web_clan_svt40/images/noticia2.jpg);
background-repeat: no-repeat; }
Y ahora un ejemplo de parte del código HTML que muestra el contenido de las CSS
//Llamo a la CSS iamgenes//
<link href="css/imagenes.css" rel="stylesheet" type="text/css">
//Código//
<!--NOTICIA 1-->
<div id="c_texto">
<div id="foto_noticia_1">
<div id="imagen_1"></div>
</div>
<div id="noticia_1">
<div id="texto_noticia_1"><span class="titulo">MEN OF WAR AS 2</span><span class="texto_normal"> - Ya está aquí el nuevo Men Of War AS 2 con sus nuevas carcateristicas y modos de juego que hace de este nuevo titulo un referente en los juegos de estrategia en tiempo real...</span></div>
</div>
A ver si ahora queda algo mas claro.
JMSR - Huanma Sáenz
Ops!!...acabo de descubrir que el Firefox no me deja ver las imágenes pero si el explore!... sabéis que puedo hacer para que se vea en ambos exploradores?
rubenferlo Profesor Plus
Hay problemas con el 'background-image' en FF, googlea un poco. Puedes probar con ésto:
feliper
Hola,
porqué pones las rutas así ?
así son rutas que apuntan a tu sistema y debieran apuntar a tu servidor ...
igual que pones la ruta del css
## si es ruta relativa
background-image: url(images/noticia2.jpg);
## si es ruta absoluta
background-image: url(http://tuservidor/web_clan_svt40/images/noticia2.jpg);
igual me equivoco y estás haciendo algo que yo no sabía que se podía hacer ...
saludos !!
rubenferlo Profesor Plus
Si encontraste la solución estaría bien que lo notificases, para zanjar el tema.
Un saludo.
JMSR - Huanma Sáenz
¡Y como no me di ni cuenta!... funciona perfectamente indicando la ruta desde el servidor.
Muchas gracias a todos por las respuesta...tema solucionado!
Francisco Alba Ponce
No se si tendría que ver pero por si acaso yo no pondría en las rutas ni mayusculas, ni por otro lado caracteres que no sean del alfabeto ingles.
No obstante para posteriores ocasiones yo te recomendaría que pusieses las rutas hacia los ficheros de forma relativa, en vez de absoluta como las pones(para local) o bien, absolutas con la url del fichero cuando los pongas en el servidor.
Un saludo
juanandrespereiraruiz1
Me paso lo mismo por mucho tiempo y lo resolvi con las rutas absolutas.
PEEEEERO en un momento necesité usar rutas relativas en el servidor y tuve que seguir pensando, y he aqui el problemita bobo que nos tranca:
Seguramente tengas el css en una carpeta y no en mismo directorio que el index, entonces cuando llamas las img desde el css seguramente lo estés haciendo así (img/foto1.jpg), cuando en realidad primero debes SALIR DE LA CARPETA CSS y luego volver a entrar en la carpeta img. LA ruta debería ser ésta (..img/foto1.jpg) los dos puntos iniciales salen de la carpeta.
Saludos, un gusto compartir conocimiento colegas
arturios
Es mejor poner el slash después de los dos puntos de esta forma ../ así si tienes que ir más atrás en el árbol de directorios sólo debes añadir los que hagan falta, por ejemplo:
../../images/grandes/foto.jpg
Con lo que baja dos directorios para luego entrar en el de imágenes.
monicamateu80
Ole tu Arturios!
this is the answer ;)
360º
El problema es la URL, debes tener una URL relativa, es decir background-image:url(imagenes/imagen.jpg), tal y como lo tienes en cuanto la subas a un hosting no encontrará la imagen ya que la busca en tu equipo.
Un saludo.
ban75
Arturios gracias por comentario, como loca estaba intentando entender por qué la ruta no funcionaba después de hacer cambios en la estructura de carpetas!
benjamin08
¡Hola!
Podrías estar fallando en la ruta. De igual modo fíjate en tu navegador, en ocasiones ciertos navegadores limitan los formatos de las imágenes.
sandovalcastrejon
Fácil... prueba así:
background-image: url("../../Imagenes/Fondos/Deathnote.jpg");
turco323232
hola no me aparece la imagen de fondo y nose como solucionarlo,me aparece cuando cargo cualquier imagen pero la de fondo no me deja, background-image:url(../img/header.jpg); tal cual lo pongo y no me sale nada me podrian ayudar por favor sino es mucha molestia que quede en eso por favor.