CSS background-size: cover + background-attachment: fixed clipping background images
I have a list of figures containing background images. Something like the following: <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> Each of these images has their background-size set to cover and background-attachment set to fixed . figure { width: 100%; height: 100%; background-size: cover; background-attachment: fixed; } When each of the figures takes up the entire viewport, this works fine, but if there is an offset of any kind the