Comments on: Tip: Using a background image on an image

By: prs09

prs09 — Wed, 11 Nov 2009 10:20:26 +0000

I learned something new, very interesting, thanks for sharing.

By: quixote218

quixote218 — Sat, 20 Sep 2008 20:46:56 +0000

Although a number have comments (hear and at the site) show that many people were not aware of this, and that others were, it’s worth pointing out that it’s very common out on the web — you just need to look for it. Wikipedia has bee using it for years:

http://en.wikipedia.org/wiki/Image:Pamukkale00.JPG

Though I must say, what this author does is a really good use of the idea: combining the properties of a JPG compression for fuzzy backgrounds with GIF for animation and transparency. I’ve used a PNG to frame a JPG (a photo image that as a PNG would be huge) to keep from having to cut corners off rectangular images in Photoshop — and then cut them again whent eh design changes.

By: pascalopitz

pascalopitz — Mon, 15 Sep 2008 22:33:16 +0000

Just to clarify: I applied display block to get proper vertical padding. The padding in the demo is for making the runner (32*32) appear in the middle of the much larger landscape. Padding area + element area = area with BG, in this case bigger than 32*32. Of course this comes down to what you’re trying to achieve. Te way I see it this technique comes in handy for images of picture frames and the likes, that can be applied to standard image sizes without a container element. Hope this makes sense to everyone.
@dylan: The loading thing is a neat idea, I must say …

By: someguynameddylan

someguynameddylan — Mon, 15 Sep 2008 17:17:38 +0000

I’ve been putting background images on the img element for awhile. I don’t think a display of block and the padding attributes in CSS are necessary, my implementations are working fine without that.

I like to use a loading gif as the background for when I’m displaying a high quality image, because the loading gif displays and then the image loads in over it. A really nice effect.

By: doublerebel

doublerebel — Mon, 15 Sep 2008 16:49:27 +0000

I’ve been using this technique for a shadow effect on my magnifier menu for the last year. I scale the image with the magnifier while the background stays centered and does not scale, giving the illusion of perspective.
.
Different effects can be achieved depending on the background-position and other background CSS settings. (The Web Developer plugin will show the CSS I used :)). However, there is no way with IE to use two transparent PNGs in this manner, that requires a wrap element.
.
@GlenLipka: I’ve found using background-image is great for custom bullets on LI elements.

By: GlenLipka

GlenLipka — Mon, 15 Sep 2008 16:07:51 +0000

I first saw this technique from Jack Slocum in the ExtJS library. He uses a 1×1 pixel spacer.gif set to 16×16 height/width. Then he puts the “icon” as a background image. I thought it was very clever. You can use sprites that way too for hover effects.

By: robhuddles

robhuddles — Mon, 15 Sep 2008 15:35:43 +0000

I’m curious as to why you say that you “have” to set display:block on the image. Inline elements can take background images, too.

By: vsync

vsync — Mon, 15 Sep 2008 15:21:41 +0000

I’ve learned something new!!
now I must think of best implementations for this…hmmm…