Ionic Background image : center not working on Android
Question
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?
1 answers
solution1
2 ACCPTED 2016-05-03 14:55:11
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; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.