Problem:
I have developed an angular application there I am having a cover image in the home page. The code looks like this.
<div id="intro">
<div class="intro-body">
<div class="container">
<div class="row mt-5">
<div class="col-lg-10">
<h2>The hearth of the farm is the true center of our universe.</h2>
<p class="intro-text">
A full-service digital agency that loves what we do
</p>
<!-- <a href="#about" class="btn btn-default page-scroll">Learn More</a> -->
</div>
<div class="col-lg-2"></div>
</div>
</div>
</div>
</div>
This is my CSS file.
@media (min-width: 1200px) {
#intro {
display: table;
width: 100%;
height: 90%;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(../../../assets/img/7.jpg) no-repeat center center fixed;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
#intro .intro-body {
vertical-align: auto;
}
#intro .intro-body H2 {
font-size: 30px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
margin-left: -10% !important;
}
#intro .intro-body .brand-heading {
color: #E75926;
text-shadow: 0 4px #a13e1a;
}
#intro .intro-body .intro-text {
font-size: 18px;
}
}
This is how it is shown in the browser.
I want to make it like this.
Can someone help me to solve this matter by modifying my CSS? I tried a lot but I was unable to find what is the CSS property that I should change to do it. If you can help me it would be great. Thank you
