Fullscreen Background with Ionic


#1

In Ionic 1 to add a fullscreen background image i did this

$big-bg:      '../img/bg.jpg';
  //use the background image
.scroll-bg {
  background: url($big-bg) no-repeat center center fixed;
  background-size: cover;
}

In ionic 2 this does not work? So bg-scroll is gone?


Background image not fully cover the page
#2

Hmm, seems to work fine here.


#3

Yup your right that’s working. thanks.


#4

How would I set the image for the entire page (including the navbar)?


#5

@rajakhoury

ion-content {
    background: url('../image/path');
}

and make your ion-navbar transparent with css.


#6

Tried this but it’s looking weird like this:

The image doesn’t start displaying from the top.


#7

Seems like starting from the top.
Please elaborate what you desire!


#8

No, I mean, the nav-bar displays a partial image starting from somewhere in between (on the right you can see “5”). I want it like so the guy’s head displays at the top starting from the navbar (so that you’ll see “6” on the right).
I am having a hard time explaining this. My English is not very good. :frowning:


#9

instead of ion-content add background image to .scroll-content class


#10

Then it displays like this:


#11

I am using following for ionic 3

in .scss

ion-content.login-style {
background-image: url(’…/assets/imgs/loginBgImage.jpg’);
background-size: cover;
}

and in html
ion-content padding class=“login-style”