css - Background image not displaying in chrome browser

Question

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

Answer 1

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.