Automatically adjust background image size to fit screen size


I am currently using the following CSS

.home-background {
    background: url("images/phone/home.png") no-repeat fixed center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;

with my home view:

<ion-view view-title="Home" class="home-background">...</ion-view>

This results in the background image being zoomed on, with large parts missing on sides, top and bottom.

Is it a bug ?

Can ionic scale the image automatically so that the full width of the image is displayed (or full heigth) ?


instead of background-size: cover; try background-size: 100%;


same problem with background-size: 100%;


Hmm strange. Cover is equivalent of 100% 100%; so it will crop both sides while trying to scale it proportionly. But setting it to 100% should theoretically only crop one side (vertical)


Strange indeed, because the full width of the image appears on the emulator.

It’s only on the galaxy S3 device that image sides are cropped


Ah maybe background-size is not supported on old webkit engine that comes with old android? Maybe you need crosswalk


Yeah, seems that older android has some partial support for background-image options.


hi,now have you find a solution to the problem??


I use background-size: contain;

Using background-size: cover; doesn’t yield the results described in


Instead, try to set the background on the <ion-content> element:

    <ion-content class="home-background">...</ion-content>

and CSS:

.home-background {
  background: url(images/phone/home.png) no-repeat center center fixed;
  background-size: cover;

Note! Is your home.png showing at all? Make sure you make an absolute path from the .css file. I usually have to do something like: url(../images/....., but that might be dependent on how you set up your project.


yeah!it is work! tks!!


thank you! that’s perfect!


background: white;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 1;
background-size: 100% 100%;
background-position: center;
background: url("…/assets/imgs/registration_bg_v1.png");
background-repeat: no-repeat;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover; // background-position: 53% 89%;
-ms-background-size: cover;
// background-size: cover;
background-position-y: 90%;

set this to ion-content will also work… thanks for sharing … :slight_smile: