Banner image not shown in angular page - css

Question

I am still learning about angular so I might not have the best design, but anyways I get confused not being so sure where my css should be. I have src/index.html, styles.css and src/app/app.component.html, app.component.html. I am trying to customize home.component.html, no home.component.css has been implemented. On .parallax-container I am trying to show an image, but not showing as a background image.
src/styles.css
div.sm-jumbotron {
padding: 2rem;
background-color: #38547b;
color: #ffffff;
}
button.btn-submit {
background-color: #38547b;
color: #ffffff;
width: 100%;
}
button.btn-submit:focus, button.btn-submit:hover {
background-color: #38547b;
}
input.ng-invalid.ng-dirty {
border-bottom-color: #e91e63 !important;
box-shadow: 0 1px 0 0 #e91e63 !important;
}
nav ul a,
nav .brand-logo {
color: #444;
}
p {
line-height: 2rem;
}
.sidenav-trigger {
color: #26a69a;
}
.parallax-container {
min-height: 380px;
line-height: 0;
height: auto;
color: rgba(0, 0, 0, 0.9);
}
.parallax-container .section {
width: 100%;
}
#media only screen and (max-width : 992px) {
.parallax-container .section {
position: absolute;
top: 40%;
}
#index-banner .section {
top: 10%;
}
}
#media only screen and (max-width : 600px) {
#index-banner .section {
top: 0;
}
}
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
footer.page-footer {
margin: 0;
}
app.component.html
<div class="container" [style.margin-top.px]="navbarTopMargin">
<app-nav (navHeight)="onNavHeight($event)"></app-nav>
</div>
<div id="container">
<div class="my-custom-container" [style.margin-top.px]="routerOutput">
<router-outlet></router-outlet>
</div>
</div>
home.component.html
<div id="index-banner" class="parallax-container">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<h1 class="header center teal-text text-lighten-2">Join Us</h1>
<div class="row center">
<h3 class="header col s12 light">We sell and deliver products to customers that will improve health.</h3>
</div>
<div class="row center">
Get Started
</div>
</div>
</div>
<!--Show this image-->
<div class="parallax"><img src="https://mdbootstrap.com/img/Photos/Others/architecture.jpg" alt=""></div>
</div>
<div class="container">
<div class="section">
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
<h3 class="center">Fast delivery</h3>
<p class="light">
We are the fastest delivery service in America.
</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">group</i></h2>
<h3 class="center">Top quality</h3>
<p class="light">
We make sure the quality is great.
</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">location_city</i></h2>
<h3 class="center">Trusted company</h3>
<p class="light">
This company has received 98% satisfaction.
</p>
</div>
</div>
</div>

Answer 1

Please try this css in your style.css:
.parallax-container .parallax{
position: static;
}
.parallax-container .parallax img{
position: static;
transform: none;
display: block;
max-width: 100%;
}