Page 1 of 1

Is there a way to put a full screen image or animated gif in the background of page in an ionic/angular app?

Posted: Wed Oct 14, 2015 2:04 pm
by dj.colussi

My skills are coming along everyday but I am a bit stuck here. I am really looking for a method to add an animated gif to a page in an angular/ionic app much in the same fashion as Uber.

If an animated gif is not possible, could someone one help me figure out how to put an image as a background on a page. Keep in mind I am using ionic and not the jquery app choice.

Thanks in advance!


Is there a way to put a full screen image or animated gif in the background of page in an ionic/angular app?

Posted: Thu Oct 15, 2015 4:59 pm
by Evgene Karachevtsev

Hello!

Please use attribute ng-class for adding/removing css classes:
https://docs.angularjs.org/api/ng/dir...


Re: Is there a way to put a full screen image or animated gif in the background of page in an ionic/angular app?

Posted: Sat Mar 20, 2021 7:46 am
by snahta

Hi,

yes, there is a way to put full screen image or animated gif in the background of the page in an Angularjs app-

@import url(https://fonts.googleapis.com/css?family=Advent+Pro:100);
html {
background: url(http://upload.wikimedia.org/wikipedia/c ... imated.gif) no-repeat center center fixed;
background-size: cover;
}
h1{
font-family: 'Advent Pro', sans-serif;
font-size: 3em;
margin: .2em .5em;
color: rgba(0,0,0, 0.3);
}
body {
height: 100%;
}


Re: Is there a way to put a full screen image or animated gif in the background of page in an ionic/angular app?

Posted: Wed Jun 23, 2021 8:15 am
by vijayasanap

there is a way to put full screen image or animated gif in the background of the page in an Angularjs app-
Keep

background-size: cover;
}
h1{
font-family: 'Advent Pro', sans-serif;
font-size: 3em;
margin: .2em .5em;
color: rgba(0,0,0, 0.3);
}
body {
height: 100%;
}