Why an inline "background-image" style doesn't work in Chrome 10 and Internet Explorer 8?

HtmlCssGoogle ChromeInternet Explorer-8Background Image

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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

Solution 2 - Html

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%;" >

Solution 3 - Html

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

Solution 4 - Html

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMisha MoroshkoView Question on Stackoverflow
Solution 1 - HtmlMisha MoroshkoView Answer on Stackoverflow
Solution 2 - HtmlChetan KumarView Answer on Stackoverflow
Solution 3 - HtmllpdView Answer on Stackoverflow
Solution 4 - HtmlxLRDxREVENGExView Answer on Stackoverflow