View Full Version : [RESOLVED] Change background image

21 Oct 2010, 6:58 AM
Hi all!

I'm probably too tired, or I just understood nothing about sencha ^^ ... Well, I've done a quite cool applicatio with nested list, ajax, audio, video and all, but I can't resolve one simple (I hope) problem...

How do we change background application ?????? (I told you it was easy...)

There's this code here:

phoneStartupScreen: 'castle.jpg',
phoneIcon: 'icon.png',

But this doesn't work and gives me the default not-so-beautiful background.

So I tried all kind of paths, like full path (http://...../..../castle.jpg) but no more luck.

I tried also some relatives paths from the sencha-touch.js file, from the resources file... but no, nothing work. Is this here where we can change the background? Or is it in the Ext.List object? Or in an other place?

Thanks for your help!


21 Oct 2010, 7:23 AM
As I recall from a previous posting your image has to be EXACTLY the same dimensions or it won't work. 320 x 460 are the dimensions for a phone.

21 Oct 2010, 7:39 AM
Yeah! Thanks

So I tried what you suggested.

But I don't know why, I still don't see anything of my background. I changed the extension to png, just like the example... we never know... but the result isn't as expected...

My HTML page is executed at : http://mypage.com/app/index.php
The js script is included in the <head> and is at : http://mypage.com/app/components/main.js
And the image is at : http://mypage.com/app/components/imgs/img.png

So in the main.js, what is the path I need to write?

phoneStartupScreen: 'img.png', //doesn't work
phoneStartupScreen: 'imgs/img.png', //doesn't work
phoneStartupScreen: 'components/imgs/img.png', //doesn't work
phoneStartupScreen: 'app/components/img.png', //doesn't work
phoneStartupScreen: 'http://mypage.com/app/components/imgs/img.png', //doesn't work


A big thanks ;)

21 Oct 2010, 7:47 AM
I never tried it at any other level than at the same place the file containing the Ext.setup is. So you did save it as a png file right? You made it sound like you just changed the extension :) I think it can be a gif or jpeg too but I haven't tried it.

21 Oct 2010, 7:54 AM
Hehe, you have good experience finding bugs ;)

But! :P

I used Gimp to save as png, so it's a real png image 100% binary correct :)

I moved the file in the same folder as my setup, but nothing... And I also tried to delete all cache, but no more luck. Where is the best place to put the Ext.Setup? Right in the html file?

21 Oct 2010, 11:04 PM
What do you are trying to do is change the startup screen that is shown when launching the application from the homescreen. It doesnt have anything to do with the background used in the application you are creating.

Instead, try adding the following CSS in your html file ...

<style type="text/css">
body, .x-fullscreen
background: url('/Images/castle.jpg');
if you are using your own CSS file, include the !important tag to the background.

22 Oct 2010, 12:40 AM
Thanks, that's it!

Everything works perfectely!

But what is the startup screen, so? Do we see it when the "application" is only a weblink in the phone's desktop?


22 Oct 2010, 1:18 AM
Yea, the tabletStartupScreen and phoneStartupScreen are only displayed when you have added the link to your homescreen.

The Iconish properties are the icons to be displayed on homescreen :)

22 Oct 2010, 7:41 AM
ok thanks!

22 Oct 2010, 4:22 PM
I also encountered this problem. I'm glad i found the solution here. Thanks!