CODEWITHSUNDEEP
htmlcss
Shuvro Jyoti
Shuvro Jyoti

Reputation: 49

How to override css background?

enter image description here

I want to make visible my circle over this top background. What should I do?
This is my HTML Markup.

<div class="single_dept_box">
    <a href="">
        <div class="dept_overlay"></div>
        <div class="icon-box-details-dept">
            <div class="dept_circle_icon">
                <i class="fa fa-plus-square" aria-hidden="true"></i>
            </div>
            <p>Department of Medicine</p>
        </div>
     </a>
 </div>

Now, This is my css code.

.single_dept_box{
  background-color:#019CD4; 
  height: auto;
  width: 100%;
  padding: 10px 0px;
  position: relative;
}

.single_dept_box .dept_circle_icon {
  background: #5D9CEC none repeat scroll 0 0;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 50px;
  border-radius: 100%;
}
.dept_overlay{
  background:#02AFF3;
  min-height: 36%;
  width: 100%;
  top:0;
  position: absolute;

}
.icon-box-details-dept p{
  text-align: center;
  color: #fff !important;
}
.single_dept_box .dept_circle_icon i{
  margin-top: 17px;
  color: #fff !important;
}

Please tell me what I have to do?

Upvotes: 0

Views: 139

Answers (3)

Super User
Super User

Reputation: 9642

Just add position: relative on .single_dept_box .dept_circle_icon div.
check updated snippet below..

.single_dept_box{
  background-color:#019CD4; 
  height: auto;
  width: 100%;
  padding: 10px 0px;
  position: relative;
}

.single_dept_box .dept_circle_icon {
  background: #5D9CEC none repeat scroll 0 0;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 50px;
  border-radius: 100%;
  position: relative;
}
.dept_overlay{
  background:#02AFF3;
  min-height: 36%;
  width: 100%;
  top:0;
  position: absolute;

}
.icon-box-details-dept p{
  text-align: center;
  color: #fff !important;
}
.single_dept_box .dept_circle_icon i{
  margin-top: 17px;
    color: #fff !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="single_dept_box">
    <a href="">
        <div class="dept_overlay"></div>
        <div class="icon-box-details-dept">
            <div class="dept_circle_icon"> <i class="fa fa-plus-square" aria-hidden="true"></i> </div>
            <p>Department of Medicine</p>
        </div>
    </a>
</div>

Upvotes: 1

Raru
Raru

Reputation: 381

Just give the the circle z-index a positive value. Try this.

z-index:111;

Upvotes: 0

Jeff G
Jeff G

Reputation: 122

Without your html code, it is difficult for us to solve the problem. However based on your CSS, I don't think you are using z-index. This reorders the obects on a page.

Just add 'z-index:1' to the bar at the top and 'z-index:2' to the circle.

Upvotes: 0

Related Questions