Search code examples
angularbackground-imageng-style

Angular refuses to set my background

I'm trying to set the background of my page. Whatever I try, it doesn't load.

This is my page:

<div class="container" [ngStyle]="{'background-image': getUrl()}">
  <div class="col-4 justify-content-end">
    <button (click)="onLogin()" class="btn btn-success">login</button>
  </div>
</div>

This is the ts file:

/*
*  Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
*  See LICENSE in the source repository root for complete license information.
*/

import { Component } from '@angular/core';

import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {

  constructor(private authService: AuthService) {}

  onLogin() {
    this.authService.login();
  }

  getUrl() {
    return "url('https://www.pxl.be/Assets/website/pxl_algemeen/afbeeldingen/pxl_beeld_geselecteerd.jpg')";
  }
}

Anybody got an idea? Thanks in advance!

Solution

  • Its working as expected only issue over here here is , height of the div and you can also use background-size

    WORKING DEMO