MVC - Div class not showing background image or colour in CSS - html

Question

I'm trying to add a background image to one and colour to another div class using css style. However the image is not showing at all, not sure what the problem is..
HTML:
#{
ViewData["Title"] = "Home Page";
Layout = "~/Views/Shared/_DefaultLayout.cshtml";
}
<div class="parralax">
</div>
<div class="home-parralax-sub-section">
</div>
Here is my CSS:
.parralax {
background: url(../../../../images/Resources/MainImage2.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.home-parralax-sub-section{
height: 100px;
background-color: red;
}
Now if I add the image or colour directly to the div like that:
<div class="parralax" style="height: 500px; color: red;">
</div>
<div class="home-parralax-sub-section" style="height: 1000px;">
<img src="~/images/Resources/MainImage.jpg" />
</div>
It will work!
Any help would be appricated, thanks :).

Answer 1

Try this
.parralax {
background: url(http://via.placeholder.com/350x150);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 150px;
/*Add to this div height*/
}
.home-parralax-sub-section {
height: 100px;
background-color: red;
}
<div class="parralax">
</div>
<div class="home-parralax-sub-section">
</div>
Add height to div containing the background-image

Answer 2

You have to add height to .parallax class then it will work.
.parralax {
background: url('../../../../images/Resources/MainImage2.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height:500px;
}
.home-parralax-sub-section{
height: 100px;
background-color: red;
}