Positioning an image in a div after tinting it with linear gradient

Question

I have a div with a background image. I tinted this image with a linear gradient like this:

background:      -webkit-linear-gradient(
  rgba(0, 0, 0, 0.3), 
  rgba(0, 0, 0, 0.9)
),
url("../img/pic.jpg");

Now i want to move the picture because it is not really positioned the way I want to (I want to move it a bit up). I tried it with something like

background-position: -200px 0px;

This moves the image the way I want to, but it gets me an area where the tinting gradient is not applied, namely the bottom if I move the pic a bit to the top.

I could edit the photo in photoshop, but I want to do this with css.

Is it possible?

Answer 1

You can try adding the gradient on some pseudo-element, Try this:

div {
  position: relative;
  height: 300px;
  width: 300px;
  background: url("http://lorempixel.com/300/300") no-repeat;
  background-position: 20px 20px;
}
div:before {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9));
}
h2 {
  position:relative;
  z-index:1;
  color:white;
  line-height:300px;
  text-align:center;
}

<div><h2>I'm Not Tinted</h2></div>