Pictures and Backgrounds

Pictures and Backgrounds

1 - any image file you are going to use on a web page on the Internet, like an eBay 'me page' or auction listing, must be located on an Internet accessible server. This is probably NOT your own computer. Although your computer accesses the Internet, for the most part it is not publicly accessible FROM the Internet, and it is typically not a file server, therefore others on the Internet cannot see image files stored on your computer.

So, you will need to find a picture host. There are a few free ones you can use. One free one that I think is good is: PhotoBucket.com. It is both easy to use and free. You need to upload (send) your picture files there. Instructions at the site tell you how.

Here you can find a list of hosting services you can chose from. You may also find you are already paying for suitable hosting space through your Internet Service Provider (ISP), the company that provides your connection to the Internet. Check with their tech support to find out availability and terms.

2 - once you have your files hosted at a suitable hosting service you need an address to find each of them. The host service will make the Internet address of each of your image files (called a URL - Universal Resource Locator) available. For an image or picture file this will look something like:

http://your-host.com/your-account/picture.jpg

There will be one unique address for each picture file. Copy these. You are going to need them.

3 - now you need to put the URL along with some HTML code into your auction listing or 'me page'. To ad a picture, use this code:

<img src="http://yourhost.com/picture.jpg">

substituting the actual URL, of course. You are using the 'img' (IMaGe) tag. 'img' is the tag name. 'src (SouRCe) is an attribute that contains the URL. There is one space between a tag name and an attribute, and one space between each attribute if there is more than one. In this case there is just one.

Just put this code in your description where you want the picture to show up. You can put as many pictures as you have files. For repetative icons or bullets you only need to host one actual file but you can put it in your page over and over again as needed by simply inserting multiple copies of the code with the same URL. There is no extra charge from eBay (no 'per picture' fee) for hosting and using your pictures this way.

You can put as many pictures in your listing as you want but there are practical limits. If you are going to use more than four or five pictures you may want to use a 'click to enlarge' construct like this to keep things more manageable.

Some people wonder about getting the little green camera to show in the search lists if you don't use the eBay/IPIX service. eBay makes this easy with a box to tick on the listing form:

eBay camera

To use an image file as a me page or listing background is a little more complicted but really not hard at all. Host the file in the same manner. Then you will need to set up a table to hold your entire description and put the background in the table. You will need three tags: the 'table' tag itself, and the 'tr' (Table Row) and 'td' (Table Data) tags too. Put the opening tags at the start of your description before anything else, like this:

Note that the 'table' tag runs from the opening bracket < all the way to the closing bracket > and has four attributes:

the 'width' attribute ensures the table covers your whole page from left to right. It won't cover behind the eBay parts at the top and bottom. Although you see this in some auctions it is wrong to do it and eBay is actually putting a stop to it in their new listing version coming out in July.
the 'cellpadding' attribute puts a little empty space padding around the edge of the table so your text and pictures won't run right to the edge. I have set it in the example above to 20 pixels (20 dots!). You can change it to more or less with a larger or smaller number. 10 is about the smallest. 30 or 40 give you more, with 50 being about the max you would want to use.
the 'cellspacing' attribute is set to zero for this example. You do not really need it in this case but it is a good idea to include this attribute and set it to zero when not used as different browsers handle cell spacing differently if you do not set it to something.
the 'background' attribute is the one that tells the table where to find your background file. Backgrounds are tiled over the page. You can learn more about here: tiled backgrounds.

Put your entire auction description or 'me page' after the above code and then follow it with this code to close the table:

</td></tr>
</table>

Don't forget this important part of the code! And notice that the closing tags have slashes in front of the tag name. This tells us these are closing (turning off) the function(s) that we opened or turned on with the original code. These closing tags never have attributes. When we close the tag the browser knows to turn off each of the attributes that was set, or opened, in the opening tag, without being told to do so.

Notice also that the </td> and </tr> closing tags come in the reverse order from which they were opened. This is called nesting and is very important. You can learn more about that here: nesting tags.

That is really all there is to hosting your files and using a graphic as a background. I hope this helps. Please ask if you are still not sure. It is a lot to take in first pass but read this over a couple of times. It is all plain English, so don't let your eyes glaze over... force yourself and you will get it! : )

It's always the right time to use good code!

[ back | top ]