Responsive Image Scaling While Keeping Focus

Posted on

I’m detailing a nifty little css technique here to have a large hero image while keeping the subjects in focus and at their original relative position.

Screen shot 2012-12-12 at 2.30.00 PM


The key here is the background-position property using percentage values.

First, lets see the demo.

When you set  background-position with a percentage, the background image is positioned at that percentage of its parent with that percentage of the image itself centered at that point. You really have to see the demo to understand.

Let me know how this works for you!

3 thoughts on “Responsive Image Scaling While Keeping Focus

  1. Clever stuff; thanks! I don’t suppose this works easily with an image slider/carousel containing multiple focal points.

  2. Thanks for the great solution. Is there any possibility to have the image responsive for HEIGHT and sides crop? If the height of the container was 200px – the image would resize/scale to 200px height but sides would crop.

Leave a Reply

Your email address will not be published. Required fields are marked *