Responsive Background Image with off-center focal points

So you’ve picked out your background image. It’s the best one for your website and now you’re rightly concerned about the responsiveness of the image. You use the developer console to check the different device views and something you hadn’t planned for occurs: the focal point of the background-image is left out of view on mobile devices! Yes, you are using bootstrap but that won’t make a difference.

Example: If you wanted to use this image as your background in a web-app and your focal point is the person on the stairs, with view height/widths set to 100% (or close to) the person disappears on mobile.

See how sad this looks :(

Enter CSS background-position! The background-position property that is flexible to allow for use with pixels, descriptions and percentages. For a full view you can play around with the tool on W3Schools here.

After finding the coordinates as a percentage of the image width/height, I was satisfied with “background-position: 40% 50%” and this was added to my CSS.

How much better does that look!