Framing an Image
I’m not sure exactly how well known it is, but you can put a background image on any HTML element… even an image. I don’t think I’ve ever seen it done on a live site before, but it can be very useful for creating an image template for repeated use; without having to do a ton of photo editing. Like in a portfolio or image gallery.
The goal of this post is to show how you can display a decorative frame around an image with minimal markup (just your img element, and maybe a class).
The first thing I like to do when doing any serious CSS for an image is set the display to block. This allows us to do a little more with it since inline elements do have some limitations on them. So let’s do that:
CSS
img{
display:block;
}Next, we set our background image to the img. I chose a polaroid
CSS
img{
display:block;
background:url(polaroid.png);
}Then set our padding accordingly so the background image shows through, I also floated it left, for some reason.
CSS
img{
display:block;
background:url(polaroid.png);
padding:19px 25px 80px 17px;
float:left;
}And there you have it, a quick and easy way to add some *pop* to images on your site.
You can leave a response, or trackback from your own site.
« Validating with WAI-ARIA | This Week in Links 2/18 »
|
Comments (10)
|
Leave a Reply
Very cool! I didn't know you could do that
How would you go about captioning the 80px space?
I'd wrap it all in a div and set the caption paragraph margin-top to something like -80px;
I'd wrap it all in a div and set the caption paragraph margin-top to something like -80px;
I wonder how it would work if you wanted the caption text to actually appear in the space underneath the photo. Would you have to mess with z-index or something? Also, this is a great little trick that is sure help me impress people
(courtesy Tim Wright, of course!)
Possibly a DL
This is a great tip! It's not something you'd think of setting a background on an image, but that's what makes it so clever!
You could also add your caption text to the alt attribute of the image, and use jquery to append the img with an element containing the caption text, and position it relative to the image. No real benefit here, just keeping in the spirit of only using an <img> element in your markup.
True, but alt text is generally pretty short compared to most captions. You have to make sure you don't make them too long
Hey
Thanks for this interesting tip!
Some suggestions!
1. It would awesome and actually help people (especially newbies like me) if you include the background image polaroid.png in the notes. It was confusing to distinguish between the image files of Cady's jpg and the background png! I had a hard time finding it!
2. Also when I tried it out the background is actually tiling vertically! Any reasons for that? I added background-repeat: no-repeat;
3. It would also be more vivid, illustrative and easier to learn if you show MANY such images in action with a few examples of Cady and some text to go with it!
Thanks again for the tips!
Me Paparazzi