My background images looks very different on iphone and android

ionic-v1
1

I’ve got two background-images on my login.html page, first i use on in my header, which is located in index.html and displays everywhere, the second background-image i’m using in my login.html, this image is cover all page, except header of course, on my iphone and browser everything looks great, both of this images got same styles: no-repeat center center fixed, and background-size: cover, and on my iphone and browser it looks like one big image, on my android lenovo A316i, it looks very bad, background-image of login.html page looks similar like on my iphone, but image from header looks another, i’m trying to fix it all day, i spent very much time, and did nothig, i don’t know how to fix it, here is my css code for header and login.html div, and 2 screens how it looks on iphone and android, pls someone who know how to fix it give me some hint, i’m stuck.

image

Header styles:

.my-bar {
     background: url('img/background.jpg') no-repeat center center fixed !important;
     background-size: cover !important;
     height: 80px !important;
     border: none;
 }

.platform-android .my-bar {
     background: url('img/background.jpg') no-repeat center center fixed !important;
     background-size: cover !important;
     height: 80px !important;
     border: none;
 }

login.html styles:

.login-form {
    background: url('img/background.jpg') no-repeat center center fixed !important;
    background-size: cover !important;
}

.platform-android .login-form {
     background: url('img/background.jpg') no-repeat center center fixed !important;
     background-size: cover !important;
 }
2

So you’re trying to match two different images up to each other? Why don’t you give the view the single background image, and then make the header bar clear? Like this: http://codepen.io/brandyshea/pen/vNNYKw

1 Like
3

I’m not sure, what this exactly what i need, i’ve got header with background-image, i’m using this header in all pages of my application, in login.html i need to use same image like in header, but for all page, on iphone it looks like i need, but on android it looks very bad, though I using same css styles for both images.

4

I did not quite understand where this .pane class is using, in your codepen example.

5

Anyway thanks for your attention.