PDA

View Full Version : Panel Background image



mask_hot
14 May 2008, 1:42 AM
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
14 May 2008, 1:59 AM
Is this in IE?

mask_hot
14 May 2008, 2:04 AM
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
14 May 2008, 2:49 AM
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
14 May 2008, 3:38 AM
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
14 May 2008, 3:48 AM
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
16 Feb 2009, 2:57 AM
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
16 Feb 2009, 3:09 AM
You have to do it on the server. No way of doing anything to a background image.

mask_hot
16 Feb 2009, 3:34 AM
ok, so I fixed the size and resize the image.

thx

Yury Kazakov
14 Dec 2009, 12:46 AM
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.

toonitw
25 Jun 2011, 8:36 PM
This thread is very helpful for me.

shraddhasalekar
13 Jun 2012, 2:29 AM
Hi .
I also have similar requirement, need to fix size of the image. How to mention size of the background image?

thnx

vipul.suthar
8 Mar 2013, 2:05 PM
ok, so I fixed the size and resize the image.

thx

How to resize image on panel background while panel is resizing, can you spread some light ?

rabia mahmood
28 Apr 2016, 3:52 AM
I found myself really struggling with this issue as well. I tried to change the source path but I kept experiencing the issue, until I tried your suggestion and resized the file from 4048 x 3040 a large file size to 539 x 456.

This fixed the issue.
Thanks!