CODEWITHSUNDEEP
cssbackground-imagecss-filters
WPMonkey
WPMonkey

Reputation: 91

Can you apply a CSS filter to background-image of a div style element?

Here is the code that I'm looking at:

 <div class="fullwidth-box vas_row-back1" style="background-color:
 rgba(99,59,0,0.79);background-image:
 url(&quot;http://example.com/wp-content/uploads/2015/11/myphoto.jpg&quot;);background-position:
 center center;background-repeat:
 no-repeat;padding-top:80px;padding-right:40px;padding-bottom:80px;padding-left:40px;margin-bottom:
 60px;margin-top:
 30px;-webkit-background-size:cover;-moz-background-size:cover;-o-
 background-size:cover;background-size:cover;background-
 attachment:none;">

I can control the CSS for the .vas_row-back1 class, but I cannot change the output of the style= of the div because the theme creates that.

What I want to do is apply a filter to the image background. When I use:

.vas_row-back1[style] {
-webkit-filter: grayscale(80%); /* Safari */
filter: grayscale(80%); }

The filter applies to the entire div, including contents.

When I try:

.vas_row-back1[style]:background-image {
-webkit-filter: grayscale(80%); /* Safari */
filter: grayscale(80%); }

It doesn't register at all, breaks the class. I want to be able to have the filter apply only to the background image of the DIV but not the contents. Do you think this is possible? Thoughts?

Upvotes: 1

Views: 1906

Answers (2)

Iggy
Iggy

Reputation: 2121

You can use:

background-blend-mode: difference;

If it fits your browser requirements: https://caniuse.com/#feat=css-backgroundblendmode

Upvotes: 1

Julie
Julie

Reputation: 2011

You should just make a separate div with the background image nested inside this main div.

Another alternative is using a pseudo element (:before / :after) with the background style.

Upvotes: 0

Related Questions