CODEWITHSUNDEEP
htmlcssgradientgrayscalemonochrome
Ellinor
Ellinor

Reputation: 323

Monochrome image with color

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

Upvotes: 0

Views: 1754

Answers (1)

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

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!

Upvotes: 0

Related Questions