CODEWITHSUNDEEP
htmlcssextjssencha-touchsencha-touch-2
dream1
dream1

Reputation: 61

Startup image not working

I need some help regarding the Startup image.

The App should show a login panel . And i would like to set a Background image from the Startup (loading indicator) until the Login panel appears with the same Background image in full screen .

I tried 4 Methods to do it but no success First Method : I set a style block in the index.html: 

    <style type="text/css">                
shtml, body {                    
height: 100%;                    
background-color:#FFFFFF;                    
background-image: url(resources/startup/ios/Ipad_Landscape_1024x748.png);                    background-position: center;                    
background-repeat: no-repeat;                
}

-> the Problem is that the image will be loaded after the White Screen and Loading indicator and i don't know how to set it depending on the Orientation (Portrait , Landscape)

Second Method:

I wrote this in the index.html :

     <!-- startup image for web apps - iPad - landscape (748x1024)             
    Note: iPad landscape startup image has to be exactly 748x1024 pixels 
    (portrait, with contents rotated).--> 
<link rel="apple-touch-startup-image" href="resources/startup/ios/Ipad_Landscape_748x1024" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />                        
<!-- startup image for web apps - iPad - portrait (768x1004) -->            
<link rel="apple-touch-startup-image" href="resources/startup/ios/Ipad_Portrait_768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />                        
<!-- startup image for web apps (320x460) -->            
<link rel="apple-touch-startup-image" href="img/iphone.png" media="screen and (max-device-width: 320px)" />

--> No success

Third Method: 

    /*    icon: {        
'57': 'resources/icons/ios/Icon_phone.png',        
'72': 'resources/icons/ios/Icon-72_Ipad.png',        
'114': 'resources/icons/ios/Icon-114.png',        
'144': 'resources/icons/ios/[email protected]'   
 },*/               
fullscreen: true,                
glossOnIcon:true,    
isIconPrecomposed: true,    
startupImage: {        
'768x1004': 'resources/startup/ios/Ipad_Portrait_768x1004.png',        
'748x1024': 'resources/startup/ios/Ipad_Landscape_748x1024.png',    
},

--> Failed

The last one : I tried to add this line to the app.js

Code:

tabletStartupScreen:    'resources/startup/ios/Ipad_Landscape_748x1024.png',

--> failed

I need Help Please . Thanks in Advance

Upvotes: 1

Views: 773

Answers (1)

ThinkFloyd
ThinkFloyd

Reputation: 5021

Why don't you try putting your image both in background of loading screen and first view(login page)? To put an image on loading page you can change CSS property of appLoadingIndicator in index.html like this:

    #appLoadingIndicator {
        margin: auto;
        text-align: center;
        width: 980px;
        height: 540px;
        background-image:url('resources/startup/ios/Ipad_Landscape_1024x748.png');
        -webkit-animation-name: appLoadingIndicator;
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: linear;
    }

Then use the same image as background for login view.

Upvotes: 1

Related Questions