View Full Version : Panel Background image

14 May 2008, 1:42 AM

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

var p = new Ext.Panel({
title: 'My Panel',
renderTo: 'container',
bodyStyle: "background-image:url(ext/resources/images/soccer_field.jpg) !important",
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

14 May 2008, 1:59 AM
Is this in IE?

14 May 2008, 2:04 AM
nope, FF

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;">

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?

14 May 2008, 3:38 AM
I've got the loading spinner, so I guess the path is wrong?

Here is my directory structure


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?

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? :-?


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"?

16 Feb 2009, 3:09 AM
You have to do it on the server. No way of doing anything to a background image.

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


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

Any help is apprecated.


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

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?


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


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.