Apply three CSS filters side by side on an image?

Question

Have a look at the following CodePen demo: http://codepen.io/anon/pen/vLPGpZ

This is my code there:

  body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(http://lorempixel.com/900/300) no-repeat center center fixed;
  }

  body:before {
    left: 0;
    right: 0;
    content: "";
    position: fixed;
    height: 100%;
    width: 30%;
    background: url(http://lorempixel.com/900/300) no-repeat center center fixed;
    filter: sepia(1);
  }

You will see a sepia filter applied. What I want is to apply three CSS filters on same image side by side. First 1/3 part with grayscale filter, middle 1/3 part with sepia filter, last 1/3 part with contrast filter. How can I achieve this with or with jQuery or JavaScript?

Right now, even the one third part is not being covered correctly with Sepia.

Answer 1

EDIT: I see someone posted an answer already but I'll just post mine since I did it a little differently.

If you want to have them sectioned off correctly, you are going to need to split it up into different elements for each filter. You'll also need to have each element have its own background set so the filter can apply to its own section of the image and you'll need to set the position accordingly (you don't have to worry about requests because it'll only request the background image once).

Also the reason in yours the first section wasn't 1/3 is because you set it to 30% when 1/3 is technically 33.33% (repeating of course).

I made a codepen here.

.container {
   position: relative;
   width: 900px;
   height: 300px;
}

.filter-section {
  float: left;
  width: 33.333333333%;
  height: 100%;
  background: url(http://lorempixel.com/900/300) no-repeat;
}
    

.grayscale {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  background-position: left;
}

.sepia {
  -webkit-filter: sepia(1);
  filter: sepia(1);
  background-position: center;
}

.contrast {
  -webkit-filter: contrast(200%);
  filter: contrast(200%);
  background-position: right;
}

<div class="container">
  <div class="grayscale filter-section"></div>
  <div class="sepia filter-section"></div>
  <div class="contrast filter-section"></div>
</div>

Answer 2

Here you go, JSFiddle

    body {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: url(http://lorempixel.com/900/300) no-repeat center center fixed;
      -webkit-filter: contrast(1);
      filter: contrast(1);
    }

body:before {
    right: 0;
    top: 0;
    content: "";
    position: fixed;
    height: 100%;
    width: 33%;
    background: url(http://lorempixel.com/900/300) no-repeat right center fixed;
    -webkit-filter: sepia(1);
    filter: sepia(1);
}

body:after {
    left: 0;
    top: 0;
    content: "";
    position: fixed;
    height: 100%;
    width: 33%;
    background: url(http://lorempixel.com/900/300) no-repeat left center fixed;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

or this width repeated background:

JSFiddle