Apply a Filter to a Background Image

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


You can apply a filter to an entire element quite easily with the filter property. But what if you want to apply a filter just to the background of an element? It’s weirdly tricky.
There are CSS properties that specific to backgrounds, like background-blend-mode — but blending and filters are not the same thing. It sorta seems to be the reason we have backdrop-filter, but not quite. That does filtering as the background interacts with what is behind the element.
There is no background-filter, unfortunately. What are we to do?

Use a pseudo-element instead of a background
If you put the contents of the element in an inside wrapper, you can set that on top of a pseudo-element that is simply pretending to be a background.
.module {
position: relative;
}
.module::before {
content: “”;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url(graphic-to-be-filtered.jpg);
filter: grayscale(100%);
}
.module-inside {
/* This will make it stack on top of the ::before */
position: relative;
}
See the Pen Apply Filter to Psuedo Element by Chris Coyier (@chriscoyier) on CodePen.
See how the “background” gets filtered with grayscale there? We called the grayscale filter there and applied it only to the pseudo-element, leaving the rest of the content inside unfiltered.
It depends on what kind of filtering you want… you might be able to fake it with blend modes
I ran into this issue as I was specifically trying to grayscale the background image of an element. Since, as we’ve covered, there is no specific property just for that, I thought about background-blend-mode, particularly how there are blending options for things like saturation and color. If I could set pure black over the top of the graphic, then I could blend them — like I can with multiple backgrounds — and essentially fake a grayscale effect.
Note that you can’t use a solid color by itself when working with multiple backgrounds (that would be a background-color not background-image), so we have to fake that as well with a no-transition linear-gradient.
.module {
background-image:
linear-gradient(black, black),
url(image-to-be-fake-filters.jpg);
background-size: cover;
background-blend-mode: saturation;
}
See the Pen Apply Fake Filter with Blend Mode by Chris Coyier (@chriscoyier) on CodePen.
Dan Wilson’s explorations
Dan got way into this and made an exploratory Pen in which there are three layers:

Top layer: a vignette from a radial-gradient
Middle layer: solid color
Bottom layer: image graphic

You can adjust the colors used on the top two layers and apply different blend modes to each one. That was another thing I learned! Just like you can comma-separate to make multiple backgrounds (and likewise with background-size, background-position and such to apply those values to specific backgrounds) you can also comma-separate background-blend-mode to apply different blending effects to each layer.
See the Pen Multiple Backgrounds, Multiple Blend Modes by Dan Wilson (@danwilson) on CodePen.
The post Apply a Filter to a Background Image appeared first on CSS-Tricks.
Source: CssTricks

Posted on October 2, 2018 in css, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Support, Expert Drupal Development, The, Web Design Services

Share the Story

Back to Top