Automatically adjust background image size to fit screen size


#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.


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