Scaling up image with pixels in HTML/CSS?

Question

In my DIV I want to show a specific part of an image (that part is 8x8 pixels) (on the orginal image to view tose 8x8pixels you would have to do background-position: -8px -8px;), but enlarged with the "pixels saved". So you get http://piclair.com/86m3r when scaled up instead of http://piclair.com/lxn12

If anyone now how to achieve this, please tell me. I really need to solve this problem!

Answer 1

Image scaling is handled by different browsers in different ways, and there's no official way to specify how these images are scaled.

However, Firefox 3.6 and above will let you specify image-rendering in CSS. You can enable it with this CSS:

img {
    image-rendering: -moz-crisp-edges;
}

See the article on image-rendering on the Mozilla website for more details — it also applies to "background-images of any element", which sounds like what you're after.

Answer 2

A more complete list of CSS image interpolation properties can be found here: http://www.danolsavsky.com/article-images-interpolation-browser-rendering-and-css-resizing.html

Firefox:

image-rendering: optimizeSpeed;

image-rendering: optimizeQuality;

image-rendering: -moz-crisp-edges;

Opera:

image-rendering: -o-crisp-edges;

Chrome:

image-rendering: -webkit-optimize-contrast;

IE 8+:

-ms-interpolation-mode: nearest-neighbor;

W3C standard:

image-rendering: optimize-contrast;