Automatically adjust background image size to fit screen size

ionic-v1
1

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) ?

2

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

3

same problem with background-size: 100%;

4

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)

5

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

6

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

7

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

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

8

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

9

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

10

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
11

yeah！it is work! tks!!

12

thank you! that’s perfect!

13

{
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:

14

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;
}
3 Likes
15

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
16

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