Quickly Build HTML5 and PhoneGap Mobile Apps

Setting Custom Image Background For Your Mobile App

Posted: October 24th, 2011 | Author: | Filed under: Features | Tags: , , , , | 9 Comments »

A number of users asked us how to use a custom image as background for mobile app. We are working on this feature but a simple work around exists. We want to run a very simple jQuery CSS query when the mobile screen loads. First, add load event to the screen. Then, add Run Custom JavaScript action with the following code:

1
2

$('div[dsid="mobilecontainer1"]').css('background-image',
   'url("http://www.sdcblog.com/wp-content/uploads/2011/06/italy.jpg")')

I removed the Header and Footer parts and also looking for mobilecontainer1, as this is the content where I want to set the background image.

The result (click image to view the app):


Image source: http://www.sdcblog.com/2011/06/italian-artchitecture-bellissimo/italy/

9 Comments on “Setting Custom Image Background For Your Mobile App”

  1. 1 Jeff said at 13:06 on November 12th, 2011:

    For some reason when I try to do this it refuses to save the custom javascript.

  2. 2 max said at 15:17 on November 12th, 2011:

    When happens when you reopen the JavaScript window? The code is not there..?

  3. 3 Jeff said at 17:43 on November 12th, 2011:

    Yep, the window opens fine and I put javascript inside and click OK. It never saves the information. I can add navigation links and invoke datasets, etc. just no custom javascript gets saved in the on load for the page

  4. 4 max said at 19:56 on November 12th, 2011:

    @Jeff: I’ll reply to the email that you sent.

  5. 5 Danbec said at 17:34 on December 18th, 2011:

    Tested and it works.

    Better: upload an image as an asset, use the asset URL on gotiggr.com in the javascript. The APK gest generated with the included background.

    The only pain is that the background must be added manually on every single page.

  6. 6 max said at 19:55 on December 18th, 2011:

    @Danbec: You sort of already can do that. Upload an image to your app. Place the image on a screen and run test. Using Firebug (or similar), look at the image src attribute. It will be something like this: http://gotiggr.com/views/assets/asset-xxxxxxx. You can use this URL for the background, or even just /assets/asset-xxxxxxx.

  7. 7 DavidK said at 07:58 on March 6th, 2012:

    This is useful info and it works in Test from the editor, but when I go and test using Tiggzi Tester, the images do not show up…

    I am testing what is suppose to be just an HTML5 app and I have tried both the absolute url and relative /assets/ url and in both cases the images don’t show in the tester app…

    Any ideas?

  8. 8 max said at 08:46 on March 6th, 2012:

    @DavidK: please post the code that you used to set the image on our forum: http://tiggzi.com/forum

  9. 9 David K said at 09:01 on March 6th, 2012:

    Ok, thanks, I posted it over there…

Leave a Reply


    • nine + = 15