PDA

View Full Version : How to put a full screen image with a bodyStyle ?



Elfayer
10 Jul 2012, 1:07 AM
Hi,

I tried some things, but didn't succeed.

I have that :

Ext.define('DSK.view.desktopCenter.panelCenter', {
extend: 'Ext.panel.Panel',
alias: 'widget.panelCenter',

region: 'center',
bodyStyle: "background-image:url(/Content/images/background.jpg)",
border: false,
items: [{
xtype: 'panel',
itemId: 'panelTest',
title: 'Hello',
html: '<center><p>World !</p></center>',
width: 200,
height: 50,
draggable: true
}]
})

redraid
10 Jul 2012, 1:39 AM
Try this:
css:

?.mypanel .x-panel-body {
background-image:url(...) !important;
background-size: 100% 100%; !important;
}?

js:

Ext.create('Ext.panel.Panel', {
title: 'Panel',
width: 300,
height: 200,
cls: 'mypanel',
renderTo: Ext.getBody()
});


example http://jsfiddle.net/ZSkft/3/

Elfayer
10 Jul 2012, 4:01 AM
Your solution does not put an image on full screen.

redraid
10 Jul 2012, 4:23 AM
Apply cls to viewport: http://jsfiddle.net/ZSkft/1/

Elfayer
10 Jul 2012, 6:46 AM
Does not work because my panel is in front of the viewport. I really need that background to be on a panel and full screen it. I already display the image, but when i resize the window the background does not follow, and at the beginning it is already not full screened.

redraid
10 Jul 2012, 6:59 AM
You want to show image in panel and resize image (with aspect ratio?) when panel resized?

Elfayer
10 Jul 2012, 11:38 PM
37041

I would like the background to be full screen, and if possible the background image could follow the resizes. The whole screen (except the toolbar) is a panel, the panelCenter.

redraid
11 Jul 2012, 1:16 AM
This is done with simple css rule, im fix my first post
http://www.sencha.com/forum/showthread.php?229492-How-to-put-a-full-screen-image-with-a-bodyStyle&p=851518&viewfull=1#post851518 (http://www.sencha.com/forum/showthread.php?229492-How-to-put-a-full-screen-image-with-a-bodyStyle&p=851518&viewfull=1#post851518)