Problem: Background image overlapping right-hand-side of the grid

To fully appreciate this demo page you will need a fairly wide screen.

Back to the original post

Demo 1: background-position: 120% 50%

If you set the image to background-position: 300% 50%; (important position in bold) this might look fine at the width you started at but as you make the page wider or thinner it will cause the background image to move proportionally too far left and right. I want the image to appear to remain static.

Demo 2: background-position: 50% 50%

To remain static at any width we want to use background-position: 50% 50%; (important position in bold) which would cause the background image to show centered on the page - at all widths.

Demo 3: Final solution

Modify the image to have a large amount of transparency to the left so it appears to be right-aligned