{"id":39748,"date":"2026-01-24T03:09:23","date_gmt":"2026-01-24T11:09:23","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=39748"},"modified":"2026-01-24T03:09:25","modified_gmt":"2026-01-24T11:09:25","slug":"how-can-css-cropping-techniques-isolate-or-hide-portions-of-an-image","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/questions\/how-can-css-cropping-techniques-isolate-or-hide-portions-of-an-image","title":{"rendered":"How can CSS cropping techniques isolate or hide portions of an image?"},"content":{"rendered":"\n

Front-end developers frequently ask how to show only a portion of an image without opening a graphics editor. In community threads, you will see variations of the same need: create square avatars, focus on a subject in a banner, mask a shape, or crop an image responsively. <\/p>\n\n\n\n

Question:<\/h2>\n\n\n\n

How can CSS cropping techniques isolate or hide portions of an image? I want to show only part of an image in different layouts, such as square thumbnails, circle avatars, hero banners with a focal point, and masked shapes. I would like examples using CSS for images and backgrounds, and any notes on performance or accessibility. Bonus if there is a way to offload actual cropping server side for better performance.<\/em><\/p>\n\n\n\n

Answer:<\/h2>\n\n\n\n

CSS can visually crop by confining, positioning, or masking an image within a frame. Keep in mind this does not reduce bytes downloaded. The browser still fetches the entire file, then hides parts of it. If bandwidth matters, consider a server-side crop as a complement to CSS.<\/p>\n\n\n\n

1) Frame an image and hide overflow<\/h3>\n\n\n\n

Simple, widely supported, great for thumbnails.<\/p>\n\n\n

<div class<\/span><\/span>=\"frame\"<\/span>>\n\u00a0 <img<\/span> src<\/span>=\"photo.jpg\"<\/span> alt<\/span>=\"Example\"<\/span>><\/span>\n<\/div<\/span>><\/span><\/span>\n\n.frame {\n\u00a0 width<\/span>: 200<\/span>px;\n\u00a0 height: 200<\/span>px;\n\u00a0 overflow: hidden;\n\u00a0 position: relative;\n}\n.frame img {\n\u00a0 position<\/span>: absolute;\n\u00a0 top: -20<\/span>px; \u00a0 \/* adjust focal point *\/<\/span>\n\u00a0 left: -50<\/span>px;\n\u00a0 height: 240<\/span>px; \/* optional scale to fill *\/<\/span>\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
2) object-fit and object-position for intrinsic images<\/h3>\n\n\n\n
Use object-fit: cover<\/code> to fill a fixed box while preserving aspect ratio. Adjust the focal point with object-position<\/code>.<\/p>\n\n\n
<img class<\/span><\/span>=\"thumb\"<\/span> src=\"photo.jpg\"<\/span> alt=\"Landscape\"<\/span>>\n\n.thumb {\n\u00a0 width<\/span>: 240<\/span>px;\n\u00a0 height: 160<\/span>px;\n\u00a0 object-fit: cover;\u00a0 \u00a0 \u00a0 \u00a0 \/* similar to background-size: cover *\/<\/span>\n\u00a0 object-position: 30<\/span>% 40<\/span>%; \/* nudge the crop window *\/<\/span>\n\u00a0 border-radius: 12<\/span>px;\u00a0 \u00a0 \u00a0 \/* optional rounded corners *\/<\/span>\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
For layout alignment details, see this guide on centering images with HTML and CSS<\/a>.<\/p>\n\n\n\n
3) background-image with background-size and background-position<\/h3>\n\n\n\n
Great for decorative images or when you need to overlay content. The element acts as the crop window. Explore techniques in 6 ways to stretch a background image with CSS<\/a>.<\/p>\n\n\n
<div<\/span> class<\/span>=\"hero\"<\/span>><\/span><\/div<\/span>><\/span>\n\n.hero {\n\u00a0 width: 100%;\n\u00a0 height: 300px;\n\u00a0 background-image: url('banner.jpg');\n\u00a0 background-size: cover;\u00a0 \u00a0 \u00a0 \u00a0 \/* cover crops to fill *\/\n\u00a0 background-position: 60% 40%;\u00a0 \/* control focal area *\/\n\u00a0 background-repeat: no-repeat;\n}<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
4) clip-path for geometric or custom shape crops<\/h3>\n\n\n\n
Use the clip-path<\/code> property to reveal only the desired region. Works on any element.<\/p>\n\n\n
<img class<\/span><\/span>=\"clip\"<\/span> src=\"photo.jpg\"<\/span> alt=\"Subject\"<\/span>>\n\n.clip {\n\u00a0 width<\/span>: 300<\/span>px;\n\u00a0 height: 300<\/span>px;\n\u00a0 object-fit: cover;\n\u00a0 clip-path: circle(45<\/span>% at 50<\/span>% 50<\/span>%); \/* circle avatar *\/<\/span>\n}\n\n\/* Custom polygon *\/<\/span>\n.custom-clip {\n\u00a0 clip-path: polygon(10<\/span>% 10<\/span>%, 90<\/span>% 10<\/span>%, 80<\/span>% 90<\/span>%, 20<\/span>% 90<\/span>%);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
5) CSS masks for fades and soft reveals<\/h3>\n\n\n\n
Masks use an image or gradient to control transparency. Requires -webkit-<\/code> prefix for Safari.<\/p>\n\n\n
<img class<\/span><\/span>=\"fade-edge\"<\/span> src=\"photo.jpg\"<\/span> alt=\"Scenery\"<\/span>>\n\n.fade-edge {\n\u00a0 width<\/span>: 400<\/span>px;\n\u00a0 height: 250<\/span>px;\n\u00a0 object-fit: cover;\n\u00a0 -webkit-mask-image: linear-gradient(black 70<\/span>%, transparent 100<\/span>%);\n\u00a0 mask-image: linear-gradient(black 70<\/span>%, transparent 100<\/span>%);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
6) Sprite-style cropping with background-position<\/h3>\n\n\n\n
Show a subsection of a larger image sprite by offsetting the background.<\/p>\n\n\n
.icon<\/span> {\n\u00a0 width<\/span>: 32px<\/span>;\n\u00a0 height<\/span>: 32px<\/span>;\n\u00a0 background-image<\/span>: url<\/span>('icons-sprite.png'<\/span>);\n\u00a0 background-repeat<\/span>: no-repeat;\n\u00a0 background-position<\/span>: -96px<\/span> -64px<\/span>; \/* x y offsets *\/<\/span>\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Performance, scaling, and responsive behavior<\/h3>\n\n\n\n
You can also layer or overlay elements while keeping control of the visible region. See ideas in how to overlay a picture on a picture<\/a>.<\/p>\n\n\n\n