how to add an image under my bootstrap and angular layout? - css

Question

I have the backgroundlogin.jpg image in the assets folder of my angular project, and I would like to know how I can place it under my layout, in the white part of the figure below, where the arrows are located:
below is the project's html and ccs codes:
login.component.html:
<div class="jumbotron pt-5">
<img class="center" src="../assets/images/full-banner1.jpg">
<form class="form-signin jumbotron">
<h2 class="form-signin-heading">LOGIN</h2>
<label for="inputEmail" class="sr-only">Usuário</label>
<input name="email" [(ngModel)] = "user.username" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Senha</label>
<input name="password" [(ngModel)] = "user.password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me">Lembrar me
</label>
</div>
<button class="btn btn-lg btn-color btn-block" (click)="validateLogin();" type="button">Entrar</button>
</form>
</div>
<footer class="footer navbar-default" role="contentinfo">
<div class="container">
<p class="absolute">
Criado por Douglas
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Add font awesome icons -->
</p>
</div>
</footer>
login.component.css:
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
background-color: black;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
color: lightgray;
}
.jumbotron{
margin-top: 0 auto;
background-color: black;
}
.form-signin .checkbox {
font-weight: 400;
color: lightgray;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background-color: white;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: white;
}
.btn-color {
color: black;
background-color: white;
}
.form-signin-heading{
text-align-last: center;
color: lightgray;
}
/* Style all font awesome icons */
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
}
/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-instagram {
background: rgb(216, 128, 182);
color: white;
}
.footer{
margin-top: 0;
background:black;
}
the end result would look like this:

Answer 1

Try this.
style.scss
.bck-img {
background-image: url(./assets/images/your_image.jpg);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-repeat: no-repeat;
background-size: cover;
}
login.component.ts
ngOnInit(): void {
const body = document.getElementsByTagName('body')[0];
body.classList.add('bck-img');
}
...
ngOnDestroy(): void {
const body = document.getElementsByTagName('body')[0];
body.classList.remove('bck-img');
}
Make sure implement both OnInit& OnDestroylike this,
export class LoginComponent implements OnInit, OnDestroy { ... }
If you want also remove black part try this.
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
background-color: transparent;
}

Answer 2

Janitha Rasanga answer was right so i made the following change:
background-image: url(./assets/images/backgroundlogin.jpg);
for
background-image: url(/assets/images/backgroundlogin.jpg);