How to set image as background?

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!

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

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.

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.

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

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

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?

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

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

How to do this for a base64 image?

1 Like

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