Why are buttons appearing behind half of my background?

Question

I have the following background image that is half gray, and half white.

When elements such as buttons, or text are on the dark side of the background, they appear behind it.

When elements are on the light side it appears in front of the background.

How can I get elements to appear in front of the dark side of the background?

Here is the button code, located outside of the body tag (which my background is located in)

<div class="container">
   <div class="row">
      <div class="col-xs-12" align="center">
         <a href="Reporting.php" class="btn btn-dark btn-lg customWidth">Go</a>
      </div>
   </div>
</div>

Here is the CSS for the button.

.btn-dark {
    border-radius: 0;
    color: #fff;
    background-color: rgba(0,0,0,0.4);
    z-index:1000;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: #fff;
    background-color: rgba(0,0,0,0.7);
}

.customWidth {
    width: 100px !important;
    z-index:1000;
}

Here is the code for my background:

.background-picture {
    background-image: url("../img/background.png");
    background-size: cover;
    z-index:1;
}

Answer 1

.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(0,0,0,0.4);
z-index:1000;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: #fff;
    background-color: rgba(0,0,0,0.7);
}

.customWidth {
    width: 100px !important;
    z-index:1001;
}

more the z-index is higer more the button is hover try this code

Answer 2

If you look very closely, you can see that the button actually is above the black part as well. (Depending on the quality of your screen and its calibration, you might actually not be able to see it, but I clearly do.)

The reason is that you have a transparent background color defined (a 60% transparent black) - that's why the "black" button appears grey-ish in front of the white background, but nearly invisible in front of the very dark background.

Simply change it to be an opaque grey, and you're done.

.btn-dark {
   /* background-color: rgba(0,0,0,0.4); */
   /* about the same color: */
   background-color: #999;
}

Also, you definitely should change the font color of the buttons for the dark background to white or a very light grey.

 main{position:relative;display:inline-block;border:1px solid red;}main > div{width:200px;height:150px; display:inline-block;}.white{background:#fff;}.black{ background:#000;}button{position:absolute;left:calc(50% - 50px);width:100px;border:none;color:#fff;border:1px solid #ccc;} #one{ background:#999; top:10px; } #two{ background:rgba(0,0,0,.4); top:60px; } 

 <main> <div class="white"></div><div class="black"></div> <button id="two"> Test with rgba color! </button> <button id="one"> Test with opaque color! </button> </main> 

Answer 3

used background-color: rgba(0,0,0,0.4) for button and make the background black in cause the button will be black and not appear

you can add border or use different background color like gray red ..etc

 .btn-dark { border-radius: 0; color: #fff; background-color: rgba(30,30,30,0.4); border:none; z-index:10000; border:1px solid gray; } .btn-dark:hover, .btn-dark:focus, .btn-dark:active { color: #fff; background-color: rgba(0,0,0,0.7); } .customWidth { width: 300px !important; height:30px; display:block } 

 <div class="container"> <div class="row"> <div class="col-xs-12" align="center" style="background:black"> <a href="Reporting.php" class="btn btn-dark btn-lg customWidth">Go</a> </div> <br> <div class="col-xs-12" align="center" style="background:white"> <a href="Reporting.php" class="btn btn-dark btn-lg customWidth">Go</a> </div> </div> </div> 

Answer 4

It is not appearing behind the image, it is on the image only, your colour combination is such that you are seeing the buttons like that. However, if you check the same image uploaded by in some other system with maximum brightness you will see what I'm saying over here. I think if you can just change your colour combination everything will be fine.