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.

http://caniuse.com/#feat=background-img-opts

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 http://www.w3schools.com/cssref/css3_pr_background-size.asp

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

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

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.

7 Likes

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:

This code works for me

ion-content{
    --background: url('../your/path/image.png')  no-repeat cover fixed center;

    background: url('../your/path/image.png') no-repeat fixed center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
2 Likes

Your code works but only because the “–background” statement is no valid css. I found this solution to work the best:

ion-toolbar {
  --background: none;
  background: url("../assets/img/gradient.png") no-repeat fixed center;
  background-size: cover;
}
1 Like

This solved a problem of mine too!!! thank you very very much!