Daniel Madurell Daniel Madurell - 3 months ago 35
HTML Question

Ionic Background image : center not working on Android

I'm upgrading my Ionic App version:

ionic: ionic-bower#1.2.4
ionic-platform-web-client": ^0.7.1
cordova: 6.1.1


And after the upgrade the background image is not centered, my CSS code is:

body {
background:url('../img/splash.png') rgb(227,227,213) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


And my body html only is:

</head>
<body ng-app="starter">
<ion-spinner></ion-spinner>
</body>`


Is a possible bug of Ionic? What Am I doing wrong?

Answer

I had a problem with it too and found this link

So here is the solution for how to add background for all size of devices in hybrid application.So you have to add the following to CSS to your style.css. You have to add same css for your scroll content because above css will work only for the screen not for scroll-able screen .

.BackgroundImage{
 background: url(image.jpg) no-repeat center center fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size:contain;
 
}

.scroll-content{
  background: url(image.jpg) no-repeat center center fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size:contain;
}