CODEWITHSUNDEEP
csshtmlgoogle-chrome
Lee Davis
Lee Davis

Reputation: 4756

Background image not displaying in chrome browser

I've created a small search widget, however the background doesn't appear when viewing it through chrome. I've tested IE, FF and safari which all appear OK.

http://paradigmsearch.co.uk/widget/?id=1

I'm usually reluctant to put layout issue on SO. However, I've been going over this for a while.

On the element:

<div class="widget" id="id_300x250">

I'm applying the following CSS definitions

.widget {
  font-family: arial;
  height: 250px;
  width: 300px;
  border: none;
  background: url('/uploads/widget_background/cached/proportional/300x250/1_512648b566578.png') no-repeat center center;
}

The background just isn't visible. If this is a really silly mark-up / css oversight then I apologies profusely.

Currently using chrome browser Version 25.0.1364.172m

Upvotes: 8

Views: 41044

Answers (2)

Cao Minh
Cao Minh

Reputation: 109

I've tested your code using chrome 25.0.1364.172m, all appear OK.

Check it: http://jsfiddle.net/rcHMc/

HTML

<div class="widget" id="id_300x250">

CSS

.widget {
  font-family: arial;
  height: 250px;
  width: 300px;
  border: none;
  background: url('http://paradigmsearch.co.uk/uploads/widget_background/cached/proportional/300x250/1_512648b566578.png') no-repeat center center;
}

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128796

This is a pretty funny issue which I only figured out when opening your page in Chrome's incognito mode: Your background image is being blocked by AdBlock.

Also, for rendering purposes it's better practice to stick style elements in your page's head.

Upvotes: 19

Related Questions