How can I display just a portion of an image in HTML CSS

Question

Let s say I want a way to display just the the center 50x50px of an image that s 250x250px in HTML  How can I do that  Also  is there a way to do this for css url   references   I m aware of clip in CSS  but that seems to only work when used with absolute positioning

User · Accepted Answer

One way to do it is to set the image you want to display as a background in a container  td  div  span etc  and then adjust background-position to get the sprite you want

User · Answer

adjust the background-position to move background images in different positions of the div div           background-image  url  image url          background-position  0 -250px

User · Answer

As mentioned in the question  there is the clip css property  although it does require that the element being clipped is position  absolute   which is a shame     x000D   x000D   container   x000D    position  relative  x000D    x000D   clip   x000D    position  absolute  x000D    clip  rect 0  100px  200px  0   x000D       clip  shape top  right  bottom  left   NB  rect  is the only available option    x000D    x000D   lt div class  container  gt  x000D     lt img src  http   lorempixel com 200 200 nightlife 3    gt  x000D   lt  div gt  x000D   lt div class  container  gt  x000D     lt img id  clip  src  http   lorempixel com 200 200 nightlife 3    gt  x000D   lt  div gt  x000D   x000D   x000D    JS Fiddle demo  for experimentation   To supplement the original answer  ndash  somewhat belatedly  ndash  I m editing to show the use of clip-path  which has replaced the now-deprecated clip property   The clip-path property allows a range of options  more-so than the original clip   of    inset  mdash  rectangular cuboid shapes  defined with four values as  distance-from   top right bottom left   circle  mdash  circle diameter at x-coordinate y-coordinate   ellipse  mdash  ellipse x-axis-length y-axis-length at x-coordinate y-coordinate   polygon  mdash  defined by a series of x y coordinates in relation to the element s origin of the top-left corner  As the path is closed automatically the realistic minimum number of points for a polygon should be three  any fewer  two  is a line or  one  is a point  polygon x-coordinate1 y-coordinate1  x-coordinate2 y-coordinate2  x-coordinate3 y-coordinate3   etc       url  mdash  this can be either a local URL  using a CSS id-selector  or the URL of an external file  using a file-path  to identify an SVG  though I ve not experimented with either  as yet   so I can offer no insight as to their benefit or caveat     x000D   x000D  div container   x000D    display  inline-block  x000D    x000D   rectangular   x000D    -webkit-clip-path  inset 30px 10px 30px 10px   x000D    clip-path  inset 30px 10px 30px 10px   x000D    x000D   circle   x000D    -webkit-clip-path  circle 75px at 50  50    x000D    clip-path  circle 75px at 50  50   x000D    x000D   ellipse   x000D    -webkit-clip-path  ellipse 75px 50px at 50  50    x000D    clip-path  ellipse 75px 50px at 50  50    x000D    x000D   polygon   x000D    -webkit-clip-path  polygon 50  0  100  38   81  100   19  100   0 38    x000D    clip-path  polygon 50  0  100  38   81  100   19  100   0 38    x000D    x000D   lt div class  container  gt  x000D     lt img id  control  src  http   lorempixel com 150 150 people 1    gt  x000D   lt  div gt  x000D   lt div class  container  gt  x000D     lt img id  rectangular  src  http   lorempixel com 150 150 people 1    gt  x000D   lt  div gt  x000D   lt div class  container  gt  x000D     lt img id  circle  src  http   lorempixel com 150 150 people 1    gt  x000D   lt  div gt  x000D   lt div class  container  gt  x000D     lt img id  ellipse  src  http   lorempixel com 150 150 people 1    gt  x000D   lt  div gt  x000D   lt div class  container  gt  x000D     lt img id  polygon  src  http   lorempixel com 150 150 people 1    gt  x000D   lt  div gt  x000D   x000D   x000D    JS Fiddle demo  for experimentation   References    clip  mdash  note  deprecated  clip-path  MDN   clip-path  W3C

User · Answer

Another alternative is the following  although not the cleanest as it assumes the image to be the only element in a container  such as in this case    lt header class  siteHeader  gt     lt img src  img  class  siteLogo    gt   lt  header gt    You can then use the container as a mask with the desired size  and surround the image with a negative margin to move it into the right position    siteHeader      width  50px      height  50px      overflow  hidden      siteHeader  siteLogo      margin  -100px      Demo can be seen in this JSFiddle   Only seems to work in IE 9  and probably all significant versions of all other browsers

[html] How can I display just a portion of an image in HTML/CSS?

Examples related to html

Examples related to css

Examples related to image