Panel Background image

[mask_hot]

Hello,

I try to display a background image in a panel like this :

var p = new Ext.Panel({
        title: 'My Panel',
        collapsible:true,
        renderTo: 'container',
		bodyStyle: "background-image:url(ext/resources/images/soccer_field.jpg) !important",
        height:768,                    
        width:1024,
        html: Ext.example.bogusMarkup
    });

but my background is still white and my picture not displayed..

My jpg is 30ko and 768*1024px.
Is it to heavy?
Do I miss something?

thx a lot

[Animal]

Is this in IE?

[mask_hot]

nope, FF 2.0.0.14

in firebug, the css seems good when I inspect the panel

<div id="ext-gen8" class="x-panel-bwrap">
<div id="ext-gen9" class="x-panel-body" style="background-image: url(ext/resources/images/soccer_field.jpg); width: 1022px; height: 741px;">
<p>
</p>
</div>
</div>

[Animal]

And when you show the style pane, and hover the mouse over the url, does it show the image or the loading spinner?

Basically, is that path correct?

[mask_hot]

I've got the loading spinner, so I guess the path is wrong?

Here is my directory structure

./ext
./js
./images
myhtmlfile.html

my javascript file is in the js directory

Should my path in my javascript file be (if I put my jpg in ./images)
images/myjpg.jpg or ../images/myjpg.jpg?

[mask_hot]

I found what it was!

just a f*ing permission issue... just needed a chmod +r on my jpg file and it works!

How do I mark this thread as resolved now?

[mask_hot]

Is it possible to adapt size of the background image?

My bkgImg is 768*1024 and for example, my Panel is just 384*512.. Do I have to resize my bkgImg or can it be done "on the fly"?

[Animal]

You have to do it on the server. No way of doing anything to a background image.

[mask_hot]

ok, so I fixed the size and resize the image.

thx

[Yury Kazakov]

Similar problem with bar charts: "how we can set backgroun image".

new Ext.Panel({
width: 700,
height: 400,
renderTo: 'bars',
bodyStyle: "background-image:url(img/world_jp.png) !important",
items: {
xtype: 'columnchart',
store: bar_store,
yField: 'count',
xField: 'date',
extraStyle: {
xAxis: {
labelRotation: -90
}
}
}
});

It looks like charts ignore bodyStyle, the background is white.
Tried the following, also doesn't help:

<style type="text/css">
#bars .x-panel-body {
background-image: url(img/world_jp.png) !important
}
</style>

Any help is apprecated.

Sincerely,
Yury.