html - plantillas - ¿Por qué un estilo de "imagen de fondo" en línea no funciona en Chrome 10 e Internet Explorer 8?

elegantthemes wordpress

Question

¿Por qué el siguiente ejemplo muestra la imagen en Firefox 4, pero no en Chrome 10 e Internet Explorer 8?

HTML:

<div style="background-image: url(''http://www.mypicx.com/uploadimg/1312875436_05012011_2.png'')"></div>

CSS:

div {
    width: 60px;
    height: 60px;
    border: 1px solid black;
}

Alguna idea para soluciones?

Answer 1

Chrome 11 escupe lo siguiente en su depurador:

[Error] GET http://www.mypicx.com/images/logo.jpg undefined (undefined)

Parece que el servicio de alojamiento utiliza un sistema dinámico funky que impide que estos navegadores lo busquen correctamente. (En cambio, trata de recuperar la imagen base predeterminada, que es problemáticamente un jpeg.) ¿Podría simplemente cargar otra copia de la imagen en otro lugar? Esperaría que fuera la solución más fácil en una larga milla.

Editar: vea lo que sucede en Chrome cuando coloca la imagen usando las etiquetas <img> normales;)

Answer 2

Como se mencionó c-smile: solo necesita eliminar los apóstrofes en la url() :

<div style="background-image: url(http://i54.tinypic.com/4zuxif.jpg)"></div>

Demo aquí

Answer 3

Debes especificar el ancho y la altura también

 <section class="bg-solid-light slideContainer strut-slide-0" style="background-image: url(https://accounts.icharts.net/stage/icharts-images/chartbook-images/Chart1457601371484.png); background-repeat: no-repeat;width: 100%;height: 100%;" >

Answer 4

está funcionando en mi navegador google chrome versión 11.0.696.60

Creé una página simple sin otros elementos, solo etiquetas básicas y ningún archivo CSS separado y obtuve una imagen

esto es lo que configuro <div id="placeholder" style="width: 60px; height: 60px; border: 1px solid black; background-image: url(''http://www.mypicx.com/uploadimg/1312875436_05012011_2.png'')"></div> puse una identificación solo en caso de que hubiera una etiqueta hiddne id y funciona