Faux-Cropping Circles with CSS Using background-image

As promised, here is another approach to “cropping” images in CSS circles. It looks almost identical to the other fiddle, but is done a different way.

This method is better than the one I described in my previous Snippet Sunday in that the images are actually centered (without the use of negative margins). There are also less lines of CSS, because we don’t need to style the img tag.

The only issue I see with this method (other than the obvious use of inline CSS) is that you can’t add alt text to your images, which is an accessibility issue.

Was this post helpful?