How to apply color with transparency in 0.3 (for example, red) on Background-image: url (); ?

Answer 1, Authority 100%

http://jsfiddle.net/h8ekayuu/

html

& lt; div class = "img" & gt;
  & lt; div class = "img-overlay" & gt; & lt; / div & gt;
& lt; / div & gt;

css

* {
  Padding: 0;
  margin: 0;
}
.img {
  width: 500px;
  Height: 500px;
  Background: URL (http://vmeste.eu/fun/1142791216.jpg) NO-REPEAT CENTER TOP;
}
.img-overlay {
  width: 100%;
  HEIGHT: 100%;
  Background: RGBA (255,0,0,0,3.3);
}

Answer 2, Authority 125%

Answer from @ Dmitryvasilievich was true, but you need to swap gradient and background image:

background-image:
 Linear-gradient (to top, RGBA (255,0,0,0.3), RGBA (255,0,0,0,3.3)),
 URL (http://vmeste.eu/fun/1142791216.jpg);

An image going in code above overlaps the image goes down below.

Also can also separately for gradient and image Set other background properties:

background-repeat: no-repeat, no-repeat;
Background-Size: Cover, Contain;

Answer 3, Authority 25%

background: url (http://vmeste.eu/fun/1142791216.jpg), Linear-gradient (To , Top, RGBA (255,0,0,0.3), RGBA (255,0,0,0.3));