I currently have the backgroundlogin.jpg image stored in the assets directory of my Angular project. I'm interested in learning how to position it below my layout, specifically in the white section indicated by the arrows in the figure provided below:
https://i.sstatic.net/cBqcR.jpg
Here are the HTML and CSS codes for the project:
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">Username</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">Password</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">Remember me
</label>
</div>
<button class="btn btn-lg btn-color btn-block" (click)="validateLogin();" type="button">Enter</button>
</form>
</div>
<footer class="footer navbar-default" role="contentinfo">
<div class="container">
<p class="absolute">
Created by 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 -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram "></a>
</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 final outcome should resemble this: