Responsive Image Scaling While Keeping Focus

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!

CSS – Clear extra space in display: inline-block items

I run into this a lot and see people who have had the same problem. When you make a set of navigation links out of an li you set them to display: inline-block and now there are extra spaces between your items.

The spaces are actual text spaces as interpreted by the browser.

To fix:
Set your container (ul) to font-size:0 and if you have text in your li, set its font-size explicitly to what you want.

This will fix any extra spaces in your inline-block lists.