Background images for footer tabs are stretch

ionic-v1
1

I am working on android project with ionic framework.

I have www\templates\tabs.html in which I am using background images for tabs like below

.ion-ios7-information{
    background-image: url('img/news_letter_active.png');
}

But these images are appears stretch on some android devices like Micromax Canvas A111.

Please help me here.

2

Is this on the full tab-bar or an individual tab?

3

There are total 4 individual tabs each one has separate background image…

4

Can you put a simple codepen together to show this?

5

Here is the codepen created for it

6

Adding this.

-webkit-background-size: contain;
-moz-background-size: cover;
-o-background-size: contain;
background-size: contain;

should help

7

Added

 .tab-item{
    -webkit-background-size: contain;
    -moz-background-size: cover;
    -o-background-size: contain;
    background-size: contain;
}

But dosen’t help :frowning:

8

On the actual device or browser?

9

It is working great on browser but not on device still those footer images are blur …

10

Are you using the image for the resolution?
If you use are testing for retina device remember you need to use 2x image