CODEWITHSUNDEEP
htmlcssgoogle-chromeinternet-explorer-8background-image
Misha Moroshko
Misha Moroshko

Reputation: 171321

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

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?

Upvotes: 63

Views: 417967

Answers (5)

Guillermo Lupi&#225;&#241;ez Tapia
Guillermo Lupi&#225;&#241;ez Tapia

Reputation: 31

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.

Upvotes: 2

xLRDxREVENGEx
xLRDxREVENGEx

Reputation: 215

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

Upvotes: 6

Chetan Kumar
Chetan Kumar

Reputation: 397

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

Upvotes: 8

Misha Moroshko
Misha Moroshko

Reputation: 171321

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

Upvotes: 131

lpd
lpd

Reputation: 2337

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

Upvotes: 5

Related Questions