More Picture Border Fun With HTML

A few days ago, I shared with you how to make different kinds of borders on you pictures using simple HTML. We went over plain borders, thick borders, colorful borders, dotted borders, dashed borders, and double borders. I even showed you how to create a different kind of border on each side of the picture.

If you missed this intro to HTML borders, you’ll need to go back and understand the basics so that this post will make more sense.

So now, I want to take this one step further and build just a little bit more on what I’ve already shown you.  Let’s start by adding a “padding”.

How to add padding to a photo

Padding adds space between the picture and the border.  The HTML will look something like this:

padding: 20px

That will add a padding between the picture and the border of 20 pixels on all four sides.  The whole code will look like this:

<img style=”border: 5px solid #000000; padding: 20px;” title=”painted outdoor rug 6″ src=”http://www.addicted2decorating.com/wp-content/uploads/2012/05/painted-outdoor-rug-6.jpg” alt=”Outdoor rug painted with latex paint” width=”300″ />

And that code generates a picture with a border that looks like this:

Outdoor rug painted with latex paint

That’s easy enough, right?  And of course, you can make the padding any size you want just by changing the number of pixels.  Also, just like the border, you can make the padding different on each side of the picture.  So if I wanted the padding to be five pixels on the left and the right, and 20 pixels on the top and bottom, the code would look like this:

padding: 20px 5px 20px 5px

You’ll notice that there are four numbers there. The first number always starts with the top, and then the order is clockwise. So the first number is for the top, second number is the right, third number is the bottom, and fourth number is the left. Make sense?

So the whole code will look like this:

<img style=”border: 5px solid #000000; padding: 20px 5px 20px 5px;” title=”painted outdoor rug 6″ src=”http://www.addicted2decorating.com/wp-content/uploads/2012/05/painted-outdoor-rug-6.jpg” alt=”Outdoor rug painted with latex paint” width=”300″ />

And the picture would look like this:
Outdoor rug painted with latex paint

Okay, that’s nifty, but we’re just getting to the good stuff!

How To Add A Color To The Background

Now this is where it gets fun.  Just by adding one more bit of code, you can add a color to the background that will show in the “padding” area.  For this example, I’ll go back to the picture with the 20 pixel padding on all four sides.  And the bit of code that I’m going to add looks like this:

background: #A54D4F

(If you need help with hexadecimal codes for colors, you can use a chart like this one.)

So the whole code will look like this:

<img style=”border: 5px solid #000000; padding: 20px; background: #A54D4F;” title=”painted outdoor rug 6″ src=”http://www.addicted2decorating.com/wp-content/uploads/2012/05/painted-outdoor-rug-6.jpg” alt=”Outdoor rug painted with latex paint” width=”300″ />

And the picture will look like this:

Outdoor rug painted with latex paint
Of course, keep in mind that you can use (1) any style of border, e.g., dotted, dashed, double, (2) any color of border, (3) any width of border, (4) any width of padding, and (5) any color of background.

That’s a lot of choices, with almost unlimited possibilities!!

But wait!  There’s more!

How To Use A Picture As A Background On A Picture

Yep, you read that right.  Instead of using a solid color as the background that shows up in the padding, you can use a picture.  For this example, I’m going to use the same background that I use on the heading titles on my sidebar.  Here’s the picture:

So on the background code, instead of using a hexidecimal code to generate a color, we’ll use a URL to point to a picture.  It’ll look something like this:

background: url(http://www.addicted2decorating.com/wp-content/uploads/2012/03/sidebar-label-background.jpg)

The whole code looks like this:

<img style=”border: 5px solid #000000; padding: 20px; background: url(http://www.addicted2decorating.com/wp-content/uploads/2012/03/sidebar-label-background.jpg);” title=”painted outdoor rug 6″ src=”http://www.addicted2decorating.com/wp-content/uploads/2012/05/painted-outdoor-rug-6.jpg” alt=”Outdoor rug painted with latex paint” width=”300″ />

And the picture looks like this:

Outdoor rug painted with latex paint

Pretty nifty, right? Can you imagine the possibilities? And all without any need for special photo editing software!

So let’s recap all of this info about adding borders to your pictures with HTML.

 

To add special styling to your photos…

Add special styling to photos by simply adding this code after the <img code…

style=”add styling code here”

It will look like this:

<img style=”add styling code here” (there will be more code here, such as src, title, alt, and more) />

 

Possibilities for styling photos…

Add borders to photos:

To add a border to a photo, simply use this code:

border: 10px solid #000000

10px – You can change this to any width you want.
solid – This creates a solid border, but you can also choose from dotted, dashed, and double.
#000000 – This is the hexadecimal code for black, but you can choose any color you want.

Add a different border to each side of the photo:

If you’d like to add a different style of border to each side of the photo, simply define the side. Instead of simply using “border”, use these:

border-top: 10px solid #000000
border-bottom: 3px dotted #001114
border-left: 2px dotted #e4e4d4
border-right: 6px double #808080

Of course, you can change up the width of the borders, the styles, and the colors any way you like.

Add a padding between the picture and the border:

To add space (padding) between the picture and the border, simply add this code:

padding: 10px

Again, you don’t have to use 10 pixels. You can choose any width you want.

If you want a different padding on each side of the picture, you can define each side. You will need to define four sides, starting with the top, and then moving clockwise. First number is the top, second is the right side, third is the bottom, and fourth is the left side. It looks something like this:

padding: 10px 5px 20px 5px

Add a color in the background of a picture:

To add a color to the background of the picture (to show in the padding area between the picture and the border) add this code:

background: #e4e4e4

You can use a hexidecimal color chart to select a code for any color you want. Remember, this code must always start with the number sign.

Use a photo as the background for a picture:

If you prefer to use a photo for the background instead of a solid color, use this code:

background: url(http://www.addressofphoto.com)

Naturally this works better if you’re using a seamless photo (the type you would use as a background for a website) or a texture, but be brave and test out different things!

A few final tips:

(1) Remember that any of the above items that you use to style your photo has to be placed between the quotation marks after the “style”…

style=”place the info here

(2) To be on the safe side, and ensure that you don’t interfere with any other important code, just always place the style information right after the <img like this:

<img style=”place styling code here”

(2) After you’ve defined each item, you have to end with a semicolon. Even the last item MUST end with a semicolon before the closing quotation mark. If you leave off even one semicolon, the code won’t work…

style=”border: 5px solid #000000; padding: 10px;

So are you getting this stuff? Feeling overwhelmed? The best way to learn is just to start practicing. Don’t be afraid to make mistakes! You won’t break anything. The worst that can happen is that you can mess up your image code completely. If that happens, just delete all of it, re-insert your picture, and try again!

I’m telling ya…HTML is FUN!


Edit:
I just want to address the topic of speed. I know all of this HTML stuff can look intimidating and scary at first. “Well, wouldn’t it just be easier to use a photo editing program to do these things?”

The fact is, everything has a learning curve. You’re not going to be fast using a photo editing program for the first time, either. You have to learn it first. HTML is the same way.

So, as someone who is very knowledgeable about HTML, and pretty skilled at using Paint Shop Pro (my photo editing software of choice), I decided to test out which one was faster. I also tested PicMonkey, which is a popular online photo editing software.

First, I timed how long it would take to resize a picture to 350 pixels wide and then add a 10 pixel black border, and then upload it into a blog post.

The results?

Paint Shop Pro – 1 minute 18 seconds to open the photo, resize, add a border, save the edited picture, upload it to my server and add it to my blog post.

PicMonkey – 2 minutes 27 seconds to upload the photo to PicMonkey, resize the photo, add the border, save the picture to my computer, upload it to my server, and add it to my blog post.

HTML – 39 seconds to upload the photo, add it to the blog post, and then resize and add a border using HTML.

 

Next, I decided to do a test using a picture as a background for a picture, like this…

The results?

Paint Shop Pro – 4 minutes 40 seconds to open the picture, resize the picture, create a multi-layer border using my small background picture image, add a black border, save the picture to my computer, upload the photo to my server, and add the photo to my blog post.

PicMonkey – there’s no option on PicMonkey to use a picture as a background on a picture, so you can’t do this with PicMonkey.

HTML – Exactly one minute to upload the photo to my server, insert the pic into my blog post, and then resize, add the background, and add the border with using HTML.

SUBSCRIBE HERE!
Enter your name and email below to receive:

New posts delivered to your inbox * Giveaways exclusive to subscribers
Exclusive behind-the-scenes videos * Additional DIY tips
The occasional DIY project, just for subscribers
A plate of warm, freshly baked cookies

(Okay, probably not that last one.)  :)

Comments

  1. Tee Jay says

    Or……… you could use PicMonkey and let it do all that for you automatically. :) There *might* be a couple things you could do manually that you can’t do with PM, but over all, I think it’s much faster than HTML as it writes the code for you….. and the options for photo enhancing are mind-blowing. http://www.picmonkey.com. Oh, and you don’t have to download anything; you can do it right online.

    • says

      Of course you can use photo editing programs. I’m providing this info for people who actually want to learn and understand basic HTML, which I would encourage all bloggers to do, even if it’s for the purpose of just being able to understand it when you look at it, and being able to edit something if need be.

  2. says

    Hey, thanks for this! I’m new to blogging and need all the help I can get. I added your blog to my Favorites Bar for easy reference!

  3. says

    I mean to be helpful when I share this: The code you added to your image tags is not actually from HTM Language. It is “in-line CSS.” Alternatively, you could apply the border effect to all images by adding one code between style tags (within head tags) using CSS. Not sure if it will show up here, but:

    Apply a border style to all images for more time saving through:

    img {
    border: 5px solid #000000;
    padding: 10px;
    }

    I know this is from a year ago, but replying in case this info is still relevant/useful!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

«
»