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

The first in what I hope is a series of simple techniques to get around problems that at first sight might seem impossible. I like to say that everything is possible given a bit of thought*.

This technique is for when you need to place a background-image more than 100% to the right of the page. For instance, see the screenshot below – the vertical blue lines indicate the max-width of the main content area:

As the page gets wider than the vertical lines, I want to see more of the background image – it shouldn’t move away from the text content.

The image:

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.

View demo 1


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.

View demo 2

In order to move it off the page to the right we need to modify the image as shown below – checker board indicates transparency.

Job done.

View final demo

* I know there are still many things that can be achieved in Photoshop that don’t translate to the browser – but things are improving all the time.