Background images for footer tabs are stretch


#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