Use background-blend-mode for a simple tint

You can use the background-blend-mode css property:

.box {
  width: 300px;
  height: 300px;
  background-size: cover;
  background-image: url('https://placehold.co/300');
}

.background-tint {
  background-color: rgba(200,100,0,.5);
  background-blend-mode: multiply;
}

<div class="box background-tint"></div>

Place it on any element with a background image and you’re good to go.

The property is well supported in modern browsers NOT including IE 11. For non supporting browsers you can use a polyfill.

Working demo

Other Options

Use filter for a complex tint

You can use the filter css property:

.box {
  width: 300px; height: 300px;
  background-size: cover;
  background-image: url('https://placehold.co/300');
}

.background-tint {
  filter: sepia(100%) saturate(200%) brightness(70%) hue-rotate(330deg);
}

<div class="box background-tint"></div>

Place it on any element with a background image and you’re good to go.
In order to change the color change the hue-rotate value.

The property is well supported in modern browsers NOT including IE 11.

Working demo

Use a flat linear-gradient and a multiple background overlay

.background-tint {
  background-image: 
    linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) ),
    url('http://placehold.it/420')
}

I think this is the most widely used technique but it has the downside of being hardcoded i.e. you can’t just take a class, stick it on an element and make a tint.

You could make this into a less or sass mixin, something like:

less

.background-tint(@tint-color, @image-url) {
  background-image: 
    linear-gradient( @tint-color, @tint-color ),
    url( @image-url )
}

sass

@mixin background-tint($tint_color, $image_url) {
  background-image: 
    linear-gradient( $tint_color, $tint_color ),
    url( $image_url )
}

Working demo

Use a transparent background

This method has the advantage of working on most browsers and is just a nice class you add to any element.
The downside is that if you have anything else inside of that element you will have to wrap it in a div with some kind of positioning position: relative would work best.

Example:

.box {
  width: 300px; height: 300px;
  background-size: cover;
  background-image: url('http://placehold.it/300');
  color: #facebc;
}

.background-tint { position: relative; }

.background-tint::after {
  content: "";
  position: absolute; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  margin: auto;
}

.u-relative { position: relative; z-index: 1; } 

  <div class="box background-tint">
    <div class="u-relative">300 x 300</div>
  </div>

Working Demo