Background image like a splash screen

1
votes

I have image 2048x2048px for the splash screen. Using this tutorial, i cropped it for different devices. After app loads, it opened a main view (with login page). I need to set background of that image in this view.

But in order to change the image after loading was not noticeable, I need to have the picture was also cut off, as the initial splash screen. How can i do it?

login-view:

<ion-view hide-nav-bar="true" class="login-view">
  <div class="row">
    <div class="col">
      <img class="logo" src="img/logo.png">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <button class="login-btn button button-block button-dark" ng-click="Login()">
          {{'Login' | translate }}
      </button>
    </div>
  </div>
</ion-view>

my css class for ion-view:

.login-view{
  background-image: url('../img/splash.png') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}
2
cssimagecordovaionic-framework
Your question is bit not clear. As I understand, your image is appear at splash screen but not as background on login form, right ? – Gokul Shinde
@GokulShinde in login form image appears, but in resolution 2048x2048px, and i don't know how to crop it like in my splash screen. – mreoer
have you used bootstrap or any responsive theme? – Gokul Shinde
@GokulShinde i am using ionic framework, i update my question – mreoer
Try to set height=100% and width=100% – Gokul Shinde

2 Answers

1
votes

Solution is using this css class for the background image (2048x2048px)

.login-view{
  background-image: url("../img/splash.png");
    -webkit-background-size: cover;
    -moz-background-size: center cover;
    background-size: cover;
    background-position: center top;
}
0
votes

Splash Screen is not the background of your first page. It's a separate image that show before your application show your first page. so if you want use and image as your first page background, It's another issue.

but if you want to load a splash screen you just need to copy your image to resource folder then run ionic resources command to create all images for all devices and platforms. then for android just need to add this code to config.xml

<feature name="SplashScreen">
  <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
</feature>

and set this properties:

  <preference name="ShowSplashScreen" value="true" />
  <preference name="SplashScreen" value="screen"/>  /*my original file name is screen.png */
  <preference name="SplashScreenDelay" value="3000"/>
  <preference name="AutoHideSplashScreen" value="true" />
  <preference name="SplashShowOnlyFirstTime" value="false" />
  <preference name="FadeSplashScreen" value="false"/>

if you just want to set your login background let me know