michaelmcgurk michaelmcgurk - 3 years ago 112
CSS Question

Why is my background image not showing?

I have a button on my page that I'd like to apply a background image to.

When I have the following code, it doesn't apply. Can anyone explain why?

Demo: https://jsfiddle.net/p7octep1/

CSS:

.form-file-upload .close {
display:block;
position: absolute;
top: -13px;
right: -13px;
width: 26px;
height: 26px;
font-size: 18px;
text-align: center;
line-height: 26px;
z-index: 3;
border: 0;
background: url(http://placehold.it/26x26) 0 0 no-repeat;
}


HTML:

<div class="form-file-upload">

<button type="button" class="close"></button>

</div>

Answer Source

You've hidden your button with top:-13px, right:-13px and position:absolute properties. Position your button at the left top corner to see that background is applied:

.form-file-upload .close {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  font-size: 18px;
  text-align: center;
  line-height: 26px;
  z-index: 3;
  border: 0;
  background: url("http://placehold.it/26x26") 0 0 no-repeat;
}
<div class="form-file-upload">

  <button type="button" class="close"></button>

</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download