How to Fake a Half-Width Responsive Background Image
![](https://cdn.prod.website-files.com/6626bfaa9c06e85a5960af60/66a31fb488ff884d0fda16c4_66839239f54d175733551a3b_Screen-Shot-2017-08-01-at-5.22.42-PM.png)
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.
![](https://cdn.prod.website-files.com/6626bfaa9c06e85a5960af60/66a31fb588ff884d0fda16d9_Screen-Shot-2017-08-01-at-5.22.42-PM-300x165.png)
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.