displaying image in panel

[TheMonolith]

What is the easiest/best way to display an image in a panel?

I tried the following code but no image is displayed. I use Firefox 3.6 and Firebug doesn't complain about anything:



var previewPanel = new Ext.Panel({
title: 'Preview',
iconCls: 'magnifierIcon',
width: 400,
height: 600,
bodyStyle: "background-image: url(apple-mac.jpg) !important",
x: 50,
y: 50
});
Your help is greatly appreciated!

[fay]

Are you sure that the path to the background-image is correct? I tested something similiar with the \examples\panel\panels.js example and it worked fine.

[Animal]

Debug with Firebug. It will show a 404 in the net tab, and also, hovering over the image url in the style pane shows a spinner if the image can't be loaded.

Really, you should be able to work things out.

[TheMonolith]

@ fay

The path to the background image is definitely set correctly. The image is in the same directory as the script. I also checked the spelling for the third time and it is also correct.

@ Animal

As I said, Firebug doesn't show an error when executing the script. I also opened the HTML pane on the left and then the Style pane on the right and clicked on the :hover command but it did nothing.

Is there another way to find the problem with Firebug?

[Animal]

Is the style applied to the Panel body?

Check in Firebug. If so, hover hover the URL to see if the image is loaded. It's simple.

[TheMonolith]

It seems like the style has not been applied:


<div class="x-panel-bwrap" id="ext-gen16"><div class="x-panel-body" id="ext-gen17" style="width: 398px; height: 572px;"></div></div>

But why?

[Animal]

I don't think it likes "!important"

[Animal]

Which makes sense. It't not applicable to inline style. It's a modifier on cascading stylesheet rules.

[TheMonolith]

It works when I remove "!important". However, the image is vertically repeated. If I add "no-repeat", then no image at all is displayed.

Is it because the "no-repeat" (like "!important") is not applicable to inline styles?
And, even more important, how can I find out which styles are applicable to inline styles?

[Animal]

That would be background style!

Read the CSS standard!