background image and color together

Question

how I can give a div an background image then make it darker a bit and when i hover to div i want the darker the remove

<div id="bg">
   <h1>Cat</h1>
</div>

css:

    #bg{
      height: 200px;
      width: 200px;
      background: rgba(0,0,0,0.7) url(http://i.imgur.com/IMiabf0.jpg) ;
      background-size: cover;
      color: red
    }
    #bg:hover{
     background:url(http://i.imgur.com/IMiabf0.jpg) ;
    }

Answer 1

try this:

#bg{
  height: 200px;
  width: 200px;
  background:linear-gradient(rgba(0,0,0, 0.7), rgba(0,0,0, 0.7)), url(http://i.imgur.com/IMiabf0.jpg) ;
  background-size: cover;
  color: red
}
#bg:hover{
  background:url(http://i.imgur.com/IMiabf0.jpg) ;
  background-size: cover;
}