<p>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?
<p>
I'm aware of <em>clip</em> in CSS, but that seems to only work when used with absolute positioning.</p>

[{'answer_id': 57729, 'author': 'Espo', 'author_id': 2257, 'author_profile': 'https://Stackoverflow.com/users/2257', 'pm_score': 8, 'selected': True, 'text': '<p>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. </p>\n'}, {'answer_id': 4639862, 'author': 'David Thomas', 'author_id': 82548, 'author_profile': 'https://Stackoverflow.com/users/82548', 'pm_score': 8, 'selected': False, 'text': '<p>As mentioned in the question, there is the <a href="http://www.w3.org/TR/CSS21/visufx.html#clipping" rel="noreferrer"><code>clip</code></a> css property, although it <em>does</em> require that the element being clipped is <code>position: absolute;</code> (which is a shame):</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {\r\n  position: relative;\r\n}\r\n#clip {\r\n  position: absolute;\r\n  clip: rect(0, 100px, 200px, 0);\r\n  /* clip: shape(top, right, bottom, left); NB \'rect\' is the only available option */\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;\r\n  &lt;img src="http://lorempixel.com/200/200/nightlife/3" /&gt;\r\n&lt;/div&gt;\r\n&lt;div class="container"&gt;\r\n  &lt;img id="clip" src="http://lorempixel.com/200/200/nightlife/3" /&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p><a href="http://jsfiddle.net/davidThomas/ygds2eeu/" rel="noreferrer">JS Fiddle demo</a>, for experimentation.</p>\n\n<p>To supplement the original answer &ndash; somewhat belatedly &ndash; I\'m editing to show the use of <code>clip-path</code>, which has replaced the now-deprecated <code>clip</code> property.</p>\n\n<p>The <code>clip-path</code> property allows a range of options (more-so than the original <code>clip</code>), of:</p>\n\n<ul>\n<li><code>inset</code> &mdash; rectangular/cuboid shapes, defined with four values as \'distance-from\' <code>(top right bottom left)</code>.</li>\n<li><code>circle</code> &mdash; <code>circle(diameter at x-coordinate y-coordinate)</code>.</li>\n<li><code>ellipse</code> &mdash; <code>ellipse(x-axis-length y-axis-length at x-coordinate y-coordinate)</code>.</li>\n<li><code>polygon</code> &mdash; defined by a series of <code>x</code>/<code>y</code> 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: <code>polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...])</code>.</li>\n<li><code>url</code> &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.</li>\n</ul>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>div.container {\r\n  display: inline-block;\r\n}\r\n#rectangular {\r\n  -webkit-clip-path: inset(30px 10px 30px 10px);\r\n  clip-path: inset(30px 10px 30px 10px);\r\n}\r\n#circle {\r\n  -webkit-clip-path: circle(75px at 50% 50%);\r\n  clip-path: circle(75px at 50% 50%)\r\n}\r\n#ellipse {\r\n  -webkit-clip-path: ellipse(75px 50px at 50% 50%);\r\n  clip-path: ellipse(75px 50px at 50% 50%);\r\n}\r\n#polygon {\r\n  -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);\r\n  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;\r\n  &lt;img id="control" src="http://lorempixel.com/150/150/people/1" /&gt;\r\n&lt;/div&gt;\r\n&lt;div class="container"&gt;\r\n  &lt;img id="rectangular" src="http://lorempixel.com/150/150/people/1" /&gt;\r\n&lt;/div&gt;\r\n&lt;div class="container"&gt;\r\n  &lt;img id="circle" src="http://lorempixel.com/150/150/people/1" /&gt;\r\n&lt;/div&gt;\r\n&lt;div class="container"&gt;\r\n  &lt;img id="ellipse" src="http://lorempixel.com/150/150/people/1" /&gt;\r\n&lt;/div&gt;\r\n&lt;div class="container"&gt;\r\n  &lt;img id="polygon" src="http://lorempixel.com/150/150/people/1" /&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p><a href="http://jsfiddle.net/davidThomas/36tg0one/" rel="noreferrer">JS Fiddle demo</a>, for experimentation.</p>\n\n<p>References:</p>\n\n<ul>\n<li><strike><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clip" rel="noreferrer"><code>clip</code></a></strike> &mdash; note: <strong>deprecated</strong>.</li>\n<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path" rel="noreferrer"><code>clip-path</code> (MDN)</a>.</li>\n<li><a href="http://dev.w3.org/fxtf/css-masking-1/#the-clip-path" rel="noreferrer"><code>clip-path</code> (W3C)</a>.</li>\n</ul>\n'}, {'answer_id': 23220895, 'author': 'Vincent', 'author_id': 859631, 'author_profile': 'https://Stackoverflow.com/users/859631', 'pm_score': 5, 'selected': False, 'text': '<p>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:</p>\n\n<pre><code>&lt;header class="siteHeader"&gt;\n  &lt;img src="img" class="siteLogo" /&gt;\n&lt;/header&gt;\n</code></pre>\n\n<p>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:</p>\n\n<pre class="lang-css prettyprint-override"><code>.siteHeader{\n    width: 50px;\n    height: 50px;\n    overflow: hidden;\n}\n\n.siteHeader .siteLogo{\n    margin: -100px;\n}\n</code></pre>\n\n<p>Demo can be seen in <a href="http://jsfiddle.net/m3P44/">this JSFiddle</a>.</p>\n\n<p>Only seems to work in IE>9, and probably all significant versions of all other browsers.</p>\n'}, {'answer_id': 63898815, 'author': 'Codemaker', 'author_id': 7103882, 'author_profile': 'https://Stackoverflow.com/users/7103882', 'pm_score': 2, 'selected': False, 'text': '<p>Adjust the background-position to move background images in different positions of the <code>div</code>:</p>\n<pre class="lang-css prettyprint-override"><code>div { \n  background-image: url(\'image url\');\n  background-position: 0 -250px; \n}\n</code></pre>\n'}, {'answer_id': 72934311, 'author': 'amateur', 'author_id': 19524105, 'author_profile': 'https://Stackoverflow.com/users/19524105', 'pm_score': 0, 'selected': False, 'text': '<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>div{\nwidth: 50px;\nheight: 50px;\nbackground: no-repeat -100px -100px/500% url("https://qce.quantum.ieee.org/2022/wp-content/uploads/sites/6/2022/02/QCE22-250x250-website@1x.jpg")\n    };</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;\n&lt;head&gt;\n&lt;/head&gt;\n&lt;body&gt;\n&lt;div&gt;&lt;/div&gt;\n&lt;/body&gt;\n&lt;/html&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}]
['https://Stackoverflow.com/questions/57725', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4489/']