javascript - Is it possible to crop an image using css and display it as a css background? -

i know how display part of image css background.

for example: if image 500x500 pixels, how display image showing top left corner of image (50x50 starting 0,0)?

you can use css clip property. if want show top left corner in 50px x 50px square can do

position: absolute; clip: rect(0px, 50px, 50px, 0px); 

on background image. noted, in comments, has been deprecated, there other options.

you can use css clip-path property.

-webkit-clip-path: polygon(0 0, 10% 0, 10% 10%, 0 10%); -moz-clip-path: polygon(0 0, 10% 0, 10% 10%, 0 10%); -o-clip-path: polygon(0 0, 10% 0, 10% 10%, 0 10%); clip-path: polygon(0 0, 10% 0, 10% 10%, 0 10%); 

this 10% of image, if want 50px every time, use

-webkit-clip-path: inset(0 450px 450px 0); -moz-clip-path: inset(0 450px 450px 0); -o-clip-path: inset(0 450px 450px 0); clip-path: inset(0 450px 450px 0); 

you can wrap image in div class crop this

<div class="crop>     <img src=""/> </div> 

and crop this.

.crop {     width: 50px;     height: 50px;        overflow: hidden; } 

if adjust position, can adjust margins on .crop img.