Как разместить изображение под полупрозрачным слоем?

Question

Я знаю, что об этом уже спрашивали, но я не могу найти решение, которое работает!

Мой сайт содержит зеленый фон с формой в центре. Вы можете просмотреть jsFiddle здесь, я просто хочу, чтобы изображение, найденное здесь, было помещено под зеленым слоем, который вы видите. Изображение не должно быть растянуто - просто залейте зеленый слой с непрозрачностью около 50%.

Код, который создает зеленый слой в настоящее время:

#mainarea {

 height:900px;
  background: #2ecc71 no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Roboto";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#mainarea::before {
  z-index: -1;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  /* IE Fallback */
  background: white;
    width: 100%;
  height: 100%;
}

Спасибо за вашу помощь!

Answer 1

Я сделал некоторые изменения: проверьте это http://jsfiddle.net/h6ckedw6/2/

добавлен новый div для изображения

.bg{
    background:url(http://40.media.tumblr.com/9ba0ef66d65ee159bd1d8623964ffc8f/tumblr_njqrueR0gx1tkairwo1_1280.jpg) no-repeat top left;
    background-size:cover;
    width:100%;
 height:900px;
    position:fixed;
    z-index:-1;
}

Answer 2

Вы можете получить этот эффект, установив его фон

оформить заказ по ссылке http://jsfiddle.net/h6ckedw6/5/background-color:rgba(2,236,199,0.5);

Answer 3

В качестве примера сэмплера вы можете применить нужный цвет к изображению, используя Photoshop или любой другой графический редактор, и поиграть с непрозрачностью, а затем использовать background-image вот так:

#mainarea {

 height:900px;
  background: #2ecc71 no-repeat center center fixed;
  background-image: url(http://s2.postimg.org/cp3x1a0w9/tumblr_njqrue_R0gx1tkairwo1_1280.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Roboto";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

ссылка на измененное изображение

Live Demo