Home/ Questions/Q 8330663
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T02:11:18+00:00

I’m not up to date on the latest CSS improvements, so I figured it

  • 0

I’m not up to date on the latest CSS improvements, so I figured it was worth asking;

An <img> element is nicely written as <img src="/url.png" />, with the height and width auto or specified. I like CSS sprites for their obvious loading speed advantage, yet hate writing out all that CSS for it. Is there, or will there ever be, a syntax like <img src="/url.png" Xpx Ypx />, where X/Y represent a location shift similar to CSS’s background-position?

I understand that it would be wonky with regards to image dimensions, as they scale in HTML (as opposed to cropping, like a div with a background image would).

Is this possible, or am I just being lazy?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There isn’t anything in HTML like that at the moment.

    You could use inline CSS on the image tag, if you’ve got a 1-pixel transparent gif or png handy:

    <img style="background: url(/url.png) -Xpx -Ypx;" src="/1pix.gif" />

    But you’ll need to set the width and height of the image element so that the sprite background is visible.

    You could avoid the need for a transparent image file by including it directly in the <img> tag as a data URL:

    8-bit PNG

    <img style="background: url(/url.png) -Xpx -Ypx;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAABlBMVEX///8AAABVwtN%2BAAAAAXRS%0ATlMAQObYZgAAAApJREFUCB1jYAAAAAIAAc/INeUAAAAASUVORK5CYII%3D%0A">

    GIF (smaller)

    <img style="background: url(/url.png) -Xpx -Ypx;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D%0A">

    (See http://jsfiddle.net/r727j/1/)

    But obviously we’re getting into fairly ugly territory here. (And I couldn’t swear that the data URL will work in IE 6.)

    • 0