background image in css div tag

This has been driving me mad for hours. Please someone explain to me why no image is appearing at all. I'm using XHTML 1.0 strict. Many thanks.

CSS:

#flags {    position: relative;    background-image:url(example.png);    background-repeat: no-repeat;    float: right;    margin-left: 18px;    width:400px;    height:400px;} 

HTML:

<div id="flags"><p>text<br />       text<br/></p><ul><li>list1</li><li>list2</li><li>list3</li></ul></div>