Within my HTML code, I have a <div> that contains a whole partial view:
<div class="bkgImg">
/* content goes here */
</div>
Inside this main <div>, there are two additional <div> elements - one without a class and one with a class:
<div>
<h1>Content Here</h1>
<img class="img-rounded" src="~/Content/Images/blahblah.svg" />
<p>More Content</p>
</div>
<div class="customRound">
<ul>
<li>
<a href="unimportant">
Languages
</a>
</li>
</ul>
</div>
The "bkgImg" background displays up until the end of the first div. However, when I add a class to the second div, it appears as whitesmoke - which is the color set for the body. Why does adding a class to the inner div override the styling of the outer encompassing div?
I've attempted various solutions in CSS such as setting background to "none", "inherit", or background:rgba(0,0,0,0) to allow the original bkgImg to show, but none seem to be working!
.customRound{
background:none;
}
.customRound > ul{
background:none;
text-decoration:none;
list-style-type:none;
}
.customRound > ul > li{
background-color:black;
float:left;
height:50px;
width:50px;
border-radius:25px;
}
.bkgImg {
background-image: url("Images/PrettyPicture.png");
background-size:cover;
}
My question now is - how can I prevent the default body background from overriding the bkgImg set in the wrapping <div>? And what steps should I take to ensure no background appears on my <customRound> and <ul> elements?