CSS gradient: define width in pixels

Question

Please take a look at this fiddle: http://jsfiddle.net/jpftqc26/

A CSS gradient, starts black from left, turns into red, then back to black again. Really simple.

Is there any way I can make the red part 500px wide and the black parts fill the screen, whatever the resolution? With red in the middle, just like in the fiddle.

Is there a way do define a width in pixels, between color stops, in a CSS gradient?

Code:

.test_gradient {
background: 
linear-gradient(
      to right, 
      #000000,
      #000000 20%,
      #ff0000 20%,
      #ff0000 80%,
      #000000 80%
    );

Answer 1

Yes. you can do this with hard pixels points and the use of the calc function. Just set them as such:

http://jsfiddle.net/jpftqc26/9/

CSS:

.test_gradient {
background: 
linear-gradient(
      to right, 
      #000000 0px, /* Starting point */
      #000000 calc(50% - 250px), /* End black point */
      #ff0000 calc(50% - 250px), /* Starting red point */
      #ff0000 calc(50% + 250px), /* End red point */
      #000000 calc(50% + 250px), /* Starting black point */
      #000000 100% /* End black point */
    );

Answer 2

Another way to do it, without using calc(), is to use 2 different gradients

.test_gradient {
background-image: 
linear-gradient( to left,  #ff0000 0px,  #ff0000 250px,  #000000 100px), linear-gradient( to right,   red 0px,  #ff0000 250px,  #000000 100px);

background-size: 50.1% 1000px;
background-position: top left, top right;
background-repeat: no-repeat;
}

One goes to the right, the other to the left, and each one has half the total width

fiddle