Tengo una lista de figuras que contienen imágenes de fondo. Algo como lo siguiente:

<ul>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
</ul>

Cada una de estas imágenes tiene subackground-size ajustado acover ybackground-attachment ajustado afixed.

figure {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-attachment: fixed;
}

Cuando cada una de las figuras ocupa toda la ventana gráfica, esto funciona bien, pero si hay un desplazamiento de cualquier tipo, la imagen de fondo se recorta.

Por lo que puedo decir, esto es por diseño (https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values)

Me gustaría que las imágenes se recorten vertical u horizontalmente, pero no ambas, y que se centren en el tamaño de la figura misma.

Sé que hay soluciones de JavaScript, pero ¿hay alguna manera de hacerlo usando CSS?

Aquí hay un ejemplo de trabajo:http://codepen.io/Godwin/pen/KepiJ