How To Frame Images With CSS

by derek on July 25, 2008 · 29 comments

After seeing that Tyler Ingram recently discussed the idea of creating a simple photo frame in Photoshop, I decided to bring this post to life as it has been sitting in Draft status for quite some time.
The basic idea here is to “dress up” our photos a little bit when posting them on our website or blog. Sometimes a plain photo just looks, well, plain!
Here is an example of a plain photo, which was taken when we went to a Chicago White Sox game earlier this week. It doesn’t look bad, it just looks a little boring. To me, plain photos like this always look like they were just slapped on the page without any further consideration.

Carlos Quentin Home Run 3

Since we don’t want our images to come across as boring, we need to add a little flair (think of the movie Office Space) to make the image “pop” a little bit.
Compare the image above with the following image, which has a small border added around the entire image. While the border isn’t flashy, it does make the image stand out a little more and gives it a nice finishing touch.

Carlos Quentin Home Run 3

The above method is what has typically been used on this blog when adding an image to a post. To create that frame around the image, all we need to do is create a simple CSS class that we will then apply to the image.

img.imgBox {
	padding: 5px;
	border: 1px solid #AABAC5;
	background-color: #EEE;
	}

To apply the border to the image, we would simply specify the class in our image tag like this:


Now, we could stop there and have a nice looking image that has just enough of a frame to make the image stand out.
But that wouldn’t be any fun now, would it?
Using the example that Tyler had shared on his blog, we will kick things up a notch and add a nice black frame around the image and also add a slight white border around the image to give it some separation from the frame. The frame and border will add a really nice touch and look like this when we are done:

Carlos Quentin Home Run 3

Doesn’t that look great?
Tyler created a frame just like this by editing the image in Photoshop, however that means that we need to open each image in Photoshop and manually add the border as part of the image. While it is possible to create an action in Photoshop to streamline this process, it is not very time efficient.
That was when the idea came to me.
Rather than make the frame part of each image in Photoshop, why not make a frame that can be used over and over with the help of a little CSS?
Taking the idea a little further, we can create three or four variations of the frame to accommodate the most common size images that are used within blog posts.
As an example, I have created the following frame that can be used for images that are resized to an approximate size of 500 pixels wide by 335 pixels high. The frame adds 15 pixels to each side and also has included a small notation of my domain at the bottom.

CSS Image Frame

With this pre-made frame image, we can now use a little CSS magic to make that the background image for any image to really make it “pop” on the page.
In order to create this frame around the image, we need to create a new CSS class in our stylesheet that will define the image as a background with a padding of 15 pixels to each side.

img.imgPop {
        padding:15px;
        background: url(images/css_image_frame.jpg) no-repeat 0 0;
        }

Then, just like before, we simply need to apply this CSS class to our image tag and we have a beautifully framed image.


Obviously this method could be cumbersome if all of the images are different sizes. If that is the case, we could simply slice the frame image up into multiple images and then use CSS to “build” the frame around the image. While this would clearly be the most efficient method, as it would work for any size image, many times the images being used are approximately the same size so a pre-made frame will work well.
Hope you enjoyed this little tutorial and feel free to ask any questions!

Stay In The Loop!

Subscribe to the Derek Semmler dot com feed via RSS or Email to receive notifications when new posts are published. Follow the WordPress ninja on Twitter too!

{ 27 comments… read them below or add one }

Kelvin Kao@Puppet Kaos July 25, 2008 at 6:03 pm

Um… pretty cool trick. Might want to add a reminder for your RSS readers though. I was like… hm… the two pictures look the same, then I thought, duh, I need the CSS file.

Reply

derek July 25, 2008 at 7:30 pm

Doh, I didn’t even think of that aspect of it. Sorry about that.

Reply

Nick@romandock dot com July 25, 2008 at 8:12 pm

I thought the same thing and then realized I would need to actually click through to the article :S
Nicks last blog post..Randy Pausch Has Passed Away

Reply

Michael Kwan July 26, 2008 at 5:12 pm

I was just about to say the same thing. I was reading the post in Google Reader and all the images looked the same.
Michael Kwans last blog post..More Movies for the Weekend

Reply

life coach July 25, 2008 at 7:29 pm

Super useful…thanks!! i will definitely make use of this CSS.
life coachs last blog post..Success in Business Coach Training

Reply

derek July 25, 2008 at 7:30 pm

Great, I am happy to hear that you found it useful.

Reply

Nick@romandock dot com July 25, 2008 at 8:11 pm

That’s pretty cool…for now though, I think I might just continue to slap them on there…certainly something to keep in mind though, especially for my Sunday Snapshots!
Nicks last blog post..Randy Pausch Has Passed Away

Reply

Andrea July 25, 2008 at 9:32 pm

very informative post. although I am not for bordering pictures when I post them online. but i will say that Tyler’s picture of the seagull looks really great. I in no way mean that *yours* isnt great, im just not a huge fan of baseball. What I like about your picture is the crispness and quality of the picture. Ive been wanting a Nikon D40 (like yours) for the longest time….

Reply

derek July 26, 2008 at 1:49 am

You don’t need to rationalize why you don’t like my picture, I can take it. 😉
Oddly enough, taking the camera to the baseball game is the first time that I have really used the camera much away from home. I’d love to develop my photography skills but often just don’t have the time.

Reply

Nick@romandock dot com July 29, 2008 at 12:05 pm

The problem I find with a nice camera like that is that there is the fear of breakage or loss as well as the fact that it’s not as easy to haul around as a smaller point-and-shoot model.
Nicks last blog post..Randy Pausch Has Passed Away

Reply

Andrea July 31, 2008 at 8:28 pm

the nikon d40 advertises to be nikon’s smallest digital slr. that is the main reason why i find it so attractive. my coworker bought it after i told him that was the camera i was wanting! :p
my kids make me hesitant to want to invest in a quality camera just for the fact that I am sure it will be expensive to fix/replace as things just “accidentally” break when they touch things.

Reply

Ling@Uptake July 25, 2008 at 10:29 pm

Oh! First I thought you were going to ‘doctor’ the image. The frame does spice up the image nicely, though.

Reply

Tyler Ingram July 25, 2008 at 11:05 pm

Heya Derek! Cool thanks for bringing this post back! I will have to work in implementing it into my blog, though the first example is the easiest, getting it to work though with a varied height image might be tricky. Currently all my photos have a max width of 500px. Off to the drawing board!
Tyler Ingrams last blog post..Simple Framing Of Photos In Photoshop

Reply

derek July 26, 2008 at 1:50 am

Let me know how it goes!

Reply

Tyler Ingram July 29, 2008 at 5:45 pm

Will do though I’ll have to check back with you next week. Unless you come up with something first
Tyler Ingrams last blog post..The Secret In Making Money Online Made Me Lots Of Money!

Reply

Jayson July 26, 2008 at 1:29 am

That’s a pretty nifty little trick – I think I’ll try and do it on our site. Thanks for the idea

Reply

derek July 26, 2008 at 1:51 am

Thanks, I am glad that you like it. Hopefully you can use it on your site, let me know if you have any questions about implementing it or need any help.

Reply

Fred @ High Interest Savings Accounts July 26, 2008 at 6:44 am

This was a great post. I love these practical CSS and HTML tutorials. Thanks Derek.

Reply

Nicole Price July 26, 2008 at 8:47 am

I suppose that you need to be fussy. I am just one of those aim and shoot photographers and rarely if ever use photos in my blog. I found this a bit too technical for me!
Nicole Prices last blog post..Green Gifts

Reply

Andrea July 26, 2008 at 9:28 pm

I agree that it was a bit too technical. my eyes just sorta glazed over as i read this. :p

Reply

Nicole Price July 26, 2008 at 8:49 am

Sorry Derek, if you visit my blog you will know what I mean. The quality of the photographs that I do publish are in no way comparable to what you have done here. That is what I mean.

Reply

Larry @Commercial Lighting July 26, 2008 at 9:13 am

Cool trick. I especially like that frame

Reply

pauletet July 26, 2008 at 9:14 pm

Thanks for the info.

Reply

Justin@Airsoft Guns July 27, 2008 at 9:37 am

I never thought about that… images really do look better with frames. I will surely have to utilize that tip. I’ll probably just use the simple border, as that looks good enough.

Reply

Steve@Free iPods July 28, 2008 at 3:14 pm

I wondered where you were going with the first image (border was uninspiring to my mind) but the black border does make a huge difference.

Reply

yarn July 29, 2008 at 1:04 am

really thanks a lot for this great post.
regards

Reply

Jaxson@Tool Belt August 1, 2008 at 10:28 am

I have a website with products that this will look really good on. Thanks.
Sorry about not using keywordluv earlier.

Reply

Leave a Comment

{ 2 trackbacks }

Previous post:

Next post: