59

Why the following example shows the image in Firefox 4, but not in Chrome 10 and 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;
}

Any ideas for workarounds?

Uwe Keim
  • 39,551
  • 56
  • 175
  • 291
Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746

5 Answers5

127

As c-smile mentioned: Just need to remove the apostrophes in the url():

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

Demo here

Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746
  • 2
    The apostrophes do not make any difference here. Some other issue is at play here. Probably @lpd's answer (no hotlinking allowed?). The only reason the demo in your answer works is because it's using `http://i54.tinypic.com/4zuxif.jpg` instead of the broken `http://www.mypicx.com/uploadimg/1312875436_05012011_2.png`. – thirtydot May 01 '11 at 13:19
  • 3
    that's odd... W3 spec lists them as optional, and required in cases where url contains certain characters. http://www.w3.org/TR/CSS21/syndata.html#uri – plainjimbo Feb 02 '12 at 18:59
  • this solved the issue for me as well...when i defined the style inline. It works fine with ' in a .css file. background-image: url(Img/load.gif); if this is not a valid reason, then would like to hear more from the experts. – NoviceProgrammer Jun 30 '12 at 20:49
  • I would love to know why this works. I tested my site with Chrome, Chromium, Safari, Firefox, IE, and it only required me to remove the apostrophes for Chromium. – vcanales Jul 06 '14 at 16:44
  • Thanks for digging up the spec. Ran into this when I had a white space in a URI and my image wasn't showing up. Drove me crazy. The solution is to just wrap your URI in quotes. – corysimmons Dec 08 '19 at 19:43
8

u must specify the width and height also

 <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%;" >
Chetan Kumar
  • 397
  • 3
  • 13
5

Chrome 11 spits out the following in its debugger:

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

It looks like that hosting service is using some funky dynamic system that is preventing these browsers from fetching it correctly. (Instead it tries to fetch the default base image, which is problematically a jpeg.) Could you just upload another copy of the image elsewhere? I would expect it to be the easiest solution by a long mile.

Edit: See what happens in Chrome when you place the image using normal <img> tags ;)

lpd
  • 2,151
  • 21
  • 29
5

it is working in my google chrome browser version 11.0.696.60

I created a simple page with no other items just basic tags and no separate CSS file and got an image

this is what i setup:

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

I put an id just in case there was a hidden id tag and it works

Mostafa Norzade
  • 1,578
  • 5
  • 24
  • 40
xLRDxREVENGEx
  • 205
  • 1
  • 10
0

I would like to add (in case someone came here looking for it) that it's not possible for url() to point a local image if you are trying to send an styled email. You have to deploy that image somewhere else.

Guillermo Lupiáñez Tapia
  • 11
  • 1
  • 2