background image in div

Question

Does not show image

<div style="background-image:url(http://localhost:4200/assets/images/background/login-register.jpg);"></div>

Typing like this in the browser, http://localhost:4200/Assets/images/background/login-Register.jpg, shows the image

Html code

<div style="background-image:url(assets/images/background/login-register.jpg);">
  <div class="login-register-box">
    <mat-card>
      <mat-card-content>
        <form [formGroup]="formularioLogin">
          <div class="text-center"><img alt="homepage" src="assets/images/logo-icon.png">
            <h4 class="m-t-0">{{ 'LOGIN_PAGINA.SISTEMA' | translate }}</h4>
          </div>
          <div fxLayout="row" fxLayoutWrap="wrap">
            <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
              <mat-form-field>
                <input matInput placeholder="{{ 'LOGIN_PAGINA.DOCUMENTO' | translate }}" required
                  matTooltip="{{ 'LOGIN_PAGINA.DOCUMENTO' | translate }}" id="login" formControlName="login"
                  name="login">
              </mat-form-field>
            </div>
            <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
              <mat-form-field>
                <input matInput type="password" placeholder="{{ 'LOGIN_PAGINA.SENHA' | translate }}" required
                  matTooltip="{{ 'LOGIN_PAGINA.SENHA' | translate }}" id="senha" formControlName="senha" name="senha"
                  [type]="hide ? 'text' : 'password'">
                <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
              </mat-form-field>
            </div>
            <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
              <button mat-raised-button color="primary" class="btn-block btn-lg m-t-20 m-b-20" type="button"
                [disabled]="loading" (click)="logar()">{{ 'LOGIN' | translate }}
              </button> &nbsp;&nbsp;&nbsp;
              <button mat-raised-button color="primary" class="btn-block btn-lg m-t-20 m-b-20" type="button"
                [disabled]="loading" (click)="alterarSenha()">{{ 'LOGIN_PAGINA.ALTERAR_SENHA' | translate }}
              </button>
            </div>
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
</div>

Answer 1

Hello,

Turns out that his div has no size, so the image does not appear!

Put it like this: style="width: 500px; height: 500px; background-image: url(/assets/images/background/login-register.jpg)"

Now it has a size and takes the image straight from the root