I get this is the bit of code that adds the grey repearting gif befind the right hand side column but what i dont get is this bit 100% O - is this like x y co-ordinates or something.
It’d probably be easier to understand if the image was an irregular shape.
As previously mention the first # refers to the X coordinate. Admittedly it’s a little baffling, but when you use a bg position of 100% Y(Y can be any #, since we are repeating the bg vertically), the bg image’s RIGHT edge is aligned to the right edge of the element. Conversely a position of 0 Y will align the LEFT edge of the image with the left edge of the element, and 50% Y aligns the CENTER of the image to the CENTER of the element.
Demystifying practice, what is happening here is that you are placing a vertically repeating bg image at the right most edge of your container and as such creating the visual the illusion of a ‘column’ on the right side.