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?

1 Like
2

Hmm, seems to work fine here.

1 Like
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:

Capture
Capture.PNG412Ă—692 262 KB

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:

Capture
Capture.PNG403Ă—690 232 KB

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”