Monday, September 15th, 2008

Tip: Using a background image on an image

Category: CSS, Tip

Pascal Opitz answered the question “Can you set an image background on an image element?” in simple fashion.

All you have to do is make sure that the image is display: block and has a padding.

He put up a simple demo that uses a div with an image, and he applies backgrounds to both:

  1. div {
  2.         background: url('blur.jpg') no-repeat top left;
  3.         width: 232px;
  4.         height: 200px;             
  5. }
  7. img {
  8.         display: block;
  9.         background: url('parallax.gif') no-repeat bottom left;
  10.         padding: 93px 100px 75px 100px;
  11. }

You have the little chap running as the actual src of the image, the animated background as the img background, and then the sky background applied to the div.

Posted by Dion Almaer at 5:23 am

3.8 rating from 47 votes


Comments feed TrackBack URI

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

Comment by vsync — September 15, 2008

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.

Comment by robhuddles — September 15, 2008

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.

Comment by GlenLipka — September 15, 2008

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.

Comment by doublerebel — September 15, 2008

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.

Comment by someguynameddylan — September 15, 2008

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 …

Comment by pascalopitz — September 15, 2008

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:

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.

Comment by quixote218 — September 20, 2008

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

Comment by prs09 — November 11, 2009

Leave a comment

You must be logged in to post a comment.