PUBLISHED: MARCH 27, 2014 – ARTICLE: HTML BORDERS AND BACKGROUNDS AROUND IMAGE

Adding HTML borders and backgrounds around image is not that difficult. Sometimes you might want to have a border around images, with the borders and backgrounds around image code you can have a border around your image, change the border color and border width. You also have to change the width on the code to the same size as the width of the image that you want a border around. When you use the image border code you will have to replace the URL of the image with your image URL, and then look for border solid change the 2 to 1 for a thinner border around your image or 3 to make a wider border around your image.

The Border color can easily be changed replacing the hex color code. With the image border code you have full control. The code is responsive, this means if you are creating a website that is responsive the code will look good on any device its viewed on.

Below is a image with a black border, the border color and border width can be changed in the code. This is what the code looks like (border: solid 2px #000000;)

How to make a Border Around an Image in HTML

 
To make a border around an image in HTML copy the below code and replace our image with your image. The image border size and border color can be changed in the HTML code. This code works in most site builders including WordPress.

<div style="border: solid 2px #000000;">
<img src="http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-1.jpg" title="Borders and Backgrounds Around Image" alt="creating a website" height="490" width="746"/></div>

Next we use the same image border HTML code as above and include a hyper-link, so if you would like to have a border around an image and the image is hyper-linked use the below code. Try it click on the image below and our home page opens in a new window.

<a href="http://www.yourlink.com/" target="_blank"><div style="border: solid 2px #000000;"><img src="http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-1.jpg" title="Borders and Backgrounds Around Image" alt="image alt text here" height="490" width="746"/></a></div>

How To Float an Image to the Left of Text

If you want to know how to float an image to the left of text then copy this code. The image will be on the left and the text on the right of the image. You have full control of text size, text color, padding, the border size and color, and background color. The HTML code also has a width code, this means that you can specify the width you would like. As you can see if you have lots of text content once it reaches the height of the image the text continues below the image. The hspace moves the text to the right of the image so its not hard up against the image. Justify aligns the text right.

<div style="width:100%px; border: solid 1px #000000; background: #DBDBDB; padding: 4px; margin: 0; text-align: justify; line-height: 24px; color: #000000; font-size: 20px">
<img src="http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-1.jpg" alt="image alt text goes here" title="How to float an image to the left of text" align="left" height="169" hspace="10" width="220"/>If you want to know how to float an image to the left of text then copy this code. The image will be on the left and the text on the right of the image. You have full control of text size, text color, padding, the border size and color, and background color. The HTML code also has a width code, this means that you can specify the width you would like. As you can see if you have lots of text content once it reaches the height of the image the text continues below the image. The hspace moves the text to the right of the image so its not hard up against the image. Justify aligns the text right.
</div>

How To Float an Image to the Right of Text

Here is how to float an image to the right of text. The image will float on the right of any text that is in the code. You have full control of text size, text color, padding, the border size and color, and background color. The HTML code also has a width code, this means that you can specify the width you would like. The text will continue past the image and then under the image. The hspace moves the text to the left of the image so its not hard up against the image. Justify aligns the text right.

<div style="width:100%; border: solid 1px #000000; background: #DBDBDB; padding: 4px; margin: 0; text-align: justify; line-height: 24px; color: #000000; font-size: 20px">
<img src="http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-1.jpg" alt="how to float an image to the right of text" title="How to float an image to the right of text" align="right" height="169" hspace="10" width="220"/>Here is how to float an image to the right of text. The image will float on the right of any text that is in the code. You have full control of text size, text color, padding, the border size and color, and background color. The HTML code also has a width code, this means that you can specify the width you would like. The text will continue past the image and then under the image. The hspace moves the text to the left of the image so its not hard up against the image. Justify aligns the text right.
</div>

You may also like this

• Background and border color
• Adding color to your table borders