How to change background-image properties inside class?

Question

I have a card-panel div with background image, I want to use a filter(sepia) ONLY on the background image(it paints everything inside the div).

How to enter the background-image properties?

.card-panel {
   background-image: url("../img/d1f71749f.jpg");
   position: relative;
   filter: sepia(50%);
}

/* something like this:
   .card-panel background-image {
   filter: sepia(50%);
}
*/

You could use a separate class, then apply the background image and the filter to that class only so your HTML for the `
` would have 2 classes, one for some styles and the other purely for the background image — zik, Mar 17 '17 at 13:02
That is not possible - filters work on an element an all its content. You need to put the background image into a separate (pseudo) element, apply the filter on that, and position it behind your card element. — CBroe, Mar 17 '17 at 13:02
Possible duplicate of [How to apply a CSS 3 blur filter to a background image](http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image) — CBroe, Mar 17 '17 at 13:02

score 2 · Answer 1 · answered Mar 17 '17 at 13:03

Provide a child div inside a parent div, give background-image to the child div, and apply filter: sepia(50%); to the child div.

<div class="parent">
  <div class="child"></div>
</div>

.parent {
   position: relative;
}

.child {
   background-image: url("../img/d1f71749f.jpg");
   filter: sepia(50%);
}

How to change background-image properties inside class?

1 Answers1