How to set image as background?

#1

Hi there,

I’m having issues setting an image as the background for my login page. I’ve looked around the web for potential solutions, but nothing has worked so far. In my login.html file I have this:

<ion-content class="login-background"> ... </ion-content>

And in my app.core.scss:

@import "../pages/login/login";

.login-background {
  background-image: url("img/background.jpg") no-repeat fixed center;
  background-size: cover;
}

My image is located at www/img/background.jpg, which I believe is the correct place to put it. If anyone has any ideas as to how to make the image show, I’d really appreciate it.

Thanks!

#2

I think you need to come up one folder from the CSS folder and then back into the IMG folder so try:

background: url(../img/background.jpg)

1 Like
#3

Thanks for the reply,

Unfortunately that does not work. In my www/build/css directory, app.core.scss is missing. Is it supposed to be in there? All I see is app.ios.css, app.md.css, and app.wp.css.

#4

I think the standard folder in Ionic 2 is called images not img. If you are adding this to the SCSS file then you may need to use -

background-image: url(../../images/background.jpg);

I’m not sure what you mean when you say the app.core.scss is missing - in Ionic 2 you should be putting this in the relevant pages SCSS file I believe.

#5

I tried both of your suggestions, and it’s still not working. I’m getting really frustrated and wondering if there might be a problem with Ionic 2 rather than my code?

Thanks

#6

Bump. Anybody else have any ideas as to what could be the issue?

#7

Hmm, I’m not able to recreate this.

in my app.core.scss

@import '../pages/home/home';
.login-background {
  background-image: url('../../img/img.png');
}

I have single image in www/img call img.png, and my template is

<ion-content class="login-background">
  <ion-list>

  </ion-list>
</ion-content>

So far, it’s always showing.

Are you seeing any errors in the browser dev console?

#8

I solved the issue. All I simply did was change:

background-image: url('../../img/background.jpg')

to

background: url('../../img/background.jpg')

Thanks for the help anyways!

2 Likes
#9

Glad you fixed it. So it was a case of using the wrong CSS attribute in the end and not an Ionic problem, great!

#10

How to do this for a base64 image?

1 Like
#11

background: url("…/…/assets/imgs/background.jpg") no-repeat fixed center;
background-size: cover;