Problems with round glyphicons and (background) colors

I just get stucked on a quite simple thing:

I'm using <i class="glyphicon glyphicon-remove-sign"></i> which I want to add to the upper right corner of an image:

<div class="relative">
    <i class="glyphicon glyphicon-remove-sign"></i>
    <img src="anything.jpg">
</div>

But the X is transparent. So if I change the background-color to white, the square space around the icon also gets white - which shouldn't.

I just want to get a black Icon with an white X - and if possible a white border around the circle.

So I also tried to use glyphicon glyphicon-remove-circle and set the color to white. But if I set the background color to black, I'm getting the same problem

Solution

Finally I did it, I hope I've got it right.

container{
  position: relative;
}

i{
  left: 240px;
  top: 0;
  color: white;
  background: black;
  border-radius: 50%;
  padding: 5px;
  border: 2px solid white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="container">
  <img src="http://wallpaper.sc/en/ipad/wp-content/uploads/2014/10/ipad-2048x2048-thumbnail_00286-256x256.jpg" alt="">
 <i class="glyphicon glyphicon-remove" style="position:absolute"></i>
</div>