0

I have div with an image as a background. I want this image to be monochrome in red and black. Is this possible with css (or perhaps Javascript)? Looking at filters I can only find a way to show the image in plain black and white. To clarify, I do not want just a plain color overlay, the image needs basically have a gradient map applied to it.

My fiddle.

Code:

.top-field {
  min-height: 300px;
}
.top-field .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
}
<div class="top-field">
  <div class="bg-image" style="background-image: url('https://source.unsplash.com/category/nature/1600x900')"></div>
</div>

This is the result that I want:

enter image description here

Ellinor
  • 323
  • 3
  • 14
  • A transition between two colors, or a certain color filter? –  Nov 11 '16 at 09:32
  • I think you are looking for gradients (http://www.w3schools.com/css/css3_gradients.asp) – 0aslam0 Nov 11 '16 at 09:39
  • Possible duplicate of [How to overlay image with color in CSS?](http://stackoverflow.com/questions/18815157/how-to-overlay-image-with-color-in-css) – CMartins Nov 11 '16 at 10:03
  • http://stackoverflow.com/questions/18815157/how-to-overlay-image-with-color-in-css – CMartins Nov 11 '16 at 10:03
  • @CarlosMartins I don't really want just a solid color overlay though. I want it to be a gradient map. – Ellinor Nov 11 '16 at 10:10

1 Answers1

0

You can use CSS Linear Gradients. But you need to remove filter property from .bg-image.

.top-field {
 min-height: 300px;
}

.top-field .bg-image {
 position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
/*     -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%); */
}

.top-field:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  z-index: 999;
}
   <div class="top-field">
    <div class="bg-image" style="background-image: url('https://source.unsplash.com/category/nature/1600x900')"></div>
        </div>

Hope this helps!

Saurav Rastogi
  • 9,575
  • 3
  • 29
  • 41
  • 1
    Thanks! I am however trying to display the image without a gradient. I simply just want it to be monochrome (but instead of black and white I want it to be red and black). Is this possible? – Ellinor Nov 11 '16 at 09:52