Ionic Background image : center not working on Android - html

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?


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;
}

Related

image for specific class does not work when used on body?

i have this for a custom class in my css:
.login-img-body{
background-image: url('../img/loginWallpaper.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
if I use this class on a regular div the image is applied, but if I use the class on a body the image does not appear. the body doesn't have any other classes.

your css is not valid. You should be using background: rather than background-image: if you are using shorthand css.
.login-img-body{
background: url('../img/loginWallpaper.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

I am working in Ioniic, I added a background image in css, but when I build the android app, there is a white space in place of that background image

I am working in Ionic, I've added a background image in CSS, but when I build the android application there is a white space in place of that background image, how can I solve this error?
CSS code is:
.abc{
background-image: url('/img/s.png') !important;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

Your image should be at a path similar to www/img/background.png.
Make sure that start of your image path has "../" this will point it to the correct image path in your resource folder once the app is built for a device.
To set background image you can try below css.
.scroll-content{
background: url("../img/background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
in some ionic version
.pane{
background: url("../img/background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
If you are using ionic2 then in src/app/app.scss
.scroll-content {
background: url("../../img/background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
or
ion-content{
background: url("../../img/background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

404 image is not showing

I have an image: app/assets/images/oops.jpg
In 404.html I have:
<html>
<head>
<title>Oops! Where are we?</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
background: url('oops.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
</body>
</html>
I confirmed that the image is indeed in production on Heroku, but the browser can not find the image.
Here is an image of my files.
What am I missing here?

If your image is app/assets/images/oops.jpg
then your path to the image needs to be:
body {
background: url('/app/assets/images/oops.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

background: url('../images/oops.jpg') no-repeat center center fixed;

Try image path as "/assets/oops.jpg" or "../images/oops.jpg" this one too in another case .
Assuming that you are using ruby on rails app from your path that you have mentioned.
hope this will work for you.

I was also facing this issue while deploying a rails app on heroku in my case a little css change solved the problem
body {
background: asset-url('oops.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
use this asset-url instead of url property. hopefully it will solve your problem

instead ...
use this
body {
background: url('../images/oops.jpg');
background-repeat: no-repeat;
background-size: 100% 100% ;
}

Background image on body is partially hidden by container-fluid class

I have used a background image on body to cover full screen but it is partially hidden by container-fluid class from bootstrap3.
body
{
background: url("bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center
}
Screenshot:

changing the background on just one web page

So I have the following css code which sets the background image to all my webpages
html {
background: url(../index/images/white.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
My question is can I have a background image on one page lets say index.html and another background image for the rest of my pages?

You can do this is a variety of ways, an easy one is to give a class to a root element and style appropriately. FYI I'd use body instead of html for the background.
CSS
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body.home {
background: url(../index/images/white.jpg) no-repeat center center fixed;
}
body.product-list {
background: url(../index/images/another-image.jpg) no-repeat center center fixed;
}
index.htm
<body class="home">
...
</body>
productList.htm
<body class="product-list">
...
</body>

You could use a class instead of going directly for the html selector:
.blue
{
background: blue;
}
then call it like so:
<html class="blue">

Add internal style to index page, like below
<style>
body {
background: url(../index/images/white.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
And CSS file's body will apply to all other pages.

Add you class only to that index.html file for that site.
<html class="home-page">
html.home-page {
background: url(../index/images/white.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}