background-image selector css

Question

I want to use a filters on some 'background-image: url("http://blablabla.jpg");'

The problem now is that it also affects the typography etc. Cause I apply the filter on the div instead of the background-image.

Is it possible to have something like this in css:

background {
   filter: grayscale(100%) brightness(50%) contrast(100%);  
}

Or 'background-image' etc. I tried multiple things but nothing seems to work.

http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image-that-i-am-setting-with-ba Take a look at this. — Ivanka Todorova, Mar 25 '15 at 10:09
You cannot apply filters or opacity to background images. You may need to re-think your HTML structure. — Paulie_D, Mar 25 '15 at 10:12
@KawineshSK Not to **actual** background images...only inline images or pseudo-elements as you have suggested, The filter is **not** being applied to the background image itself. — Paulie_D, Mar 25 '15 at 10:15
@Paulie_D Cool !!!! i didn't get u clearly until you explained. — Kawinesh S K, Mar 25 '15 at 10:17
Thx for finding the duplicate, I knew there has to be one but I couldn't find one :) — clankill3r, Mar 25 '15 at 10:24

score 0 · Answer 1 · answered Mar 25 '15 at 10:12

0

use Filter With Prefix

-webkit-filter:  grayscale(100%) brightness(50%) contrast(100%);
  -moz-filter:  grayscale(100%) brightness(50%) contrast(100%);
  -o-filter:  grayscale(100%) brightness(50%) contrast(100%);
  -ms-filter:  grayscale(100%) brightness(50%) contrast(100%);
    filter: grayscale(100%) brightness(50%) contrast(100%);

DEMO

answered Mar 25 '15 at 10:12

Kawinesh S K

3,148
1
16
29

It has nothing to do with the filter prefix. Make your textfont white for example. It will become gray cause of the brightness filter. – clankill3r Mar 25 '15 at 10:24
@clankill3r no it wont check this out http://jsfiddle.net/T5j6H/623/ – Kawinesh S K Mar 25 '15 at 10:28
hmm, can you try to make the example work where the content is in a div with some class name? It fails when I try that. I either see nothing, or something not working. – clankill3r Mar 25 '15 at 10:31
@clankill3r you want the image to be in a div or body. – Kawinesh S K Mar 25 '15 at 10:32
thanks! I was hoping you knew a way around but that's what I will do then. – clankill3r Mar 25 '15 at 10:39

background-image selector css

1 Answers1