I recently ran into a design that had needed background images on half-width columns but that also needed to cover the margins going all that way to the edge of the screen (i.e. outside of the half-width grid column) and I found that the best way to do it was to fake it with a percentage based background position.

The column on the right takes up 7 of 12 grid column within a max-width container of 1200px. The background image needs to cover the entire right side of the section no matter how wide the screen gets.

The issue with trying to add a background image that covers just half the page—particularly when you’re using a grid system—is that you need the background to go beyond the max-width container and into the margins. You can’t set the background size with a percentage because you need the height and width to be calculated automatically via the cover property.  Instead, the simplest way to do this without ditching your grid system is to bake the empty space into your image and add the background to the full-width container for your content. Then set the background position to a percentage that matches the width of the column that should be covered and the background will scale responsively.

So in this case, the html looks something like this, with column one being five of twelve grid columns wide and column two being seven of twelve columns wide.

The columns are nested in a max-width container.  But the whole thing is wrapped in a full-width container – and that’s where the background image goes.  To get the correct placement, I know that the cut-off between the two columns is between five columns on the left and the seven columns on the right.  5 / 12 = 41.67.  So put the background position to 41.67% and the whole thing scales.

On a narrower screen

On a wider screen

A little tweaking might be needed for extra large or extra small breakpoints depending on the margins of your grid system and how much leeway you have with the design.  In my case, all it needed was a little left-padding on column two to ease a slight change in the position of the background as the screen size changes.