Auction Orbit - http://www.AuctionOrbit.com
   
UTILITIES
RESOURCES
TUTORIALS
FORUM
CONTACT
Sections
Utilities and Tools
Free Resources
Auction News
Everything Else
Dominant Ad Creator

Community
Forum
Chat
Guestbook

Support
Tutorials, Etc.
eBay Tips & Tricks
Contact
Auction Newsletter


Enter your e-mail address to subscribe to Auction Orbit's monthly newsletter.

If you enjoy the free content offered on this site, feel free to donate by clicking below.

ATTENTION

A new and improved Auction Orbit site is under construction and will be launched within the next several months (as will a new version of Dominant Ad Creator). In the meantime, feel free to participate in Auction Orbit's brand new community discussion forum for all the latest auction news, updates and discussions!

Enter Forum

Auction Orbit - Using Backgrounds in Your Auctions

A lot of sellers like to add a sense of style to their auctions by applying a background image to it. Using eBay, backgrounds can currently be added several different ways, although they are always restricted to only appear in the 'description' part of the ad.

If you are planning on adding a background to your listing, I'd certainly recommend you follow the guidelines below to ensure the important content is still readable and the user doesn't suffer a migraine upon viewing your ad!

Guidelines For Using Backgrounds
Ensure that your image is in GIF or JPG format and small in size (< 20KB)
For the best appearance, use an image that seamlessly tiles
Do not use an image with many varying bright colors
It is best to washout the picture you will be using (make colors less visible)
Do not use animated backgrounds - this distracts the reader

NOT A GOOD BACKGROUND!
A GOOD BACKGROUND!

Alrighty then, lets learn how to use backgrounds!

Full Page Background Add a background to your entire ad page!
Background In A Table Add a background to your description only!
Complex Backgrounds Add multiple backgrounds to your ad (border)
Previewing Backgrounds Ensure that you have a valid background!


Creating A Full Page Background

Adding a full page background to your ad means that all portions of the page your auction is located on will have your specified image appearing in the back. This includes the area that users see the current bid and auction status, along with the area where they can enter a bid amount. Selecting an appealing image for the background when creating one full-page is critical, because if the viewer can't read the important information such as the current bid price, they will likely turn away.

NOTE: EBay has changed the style and limitations of ad layouts... Due to the changes, you are now only able to add a background to the main decsription portion of the ad (even with this particular tutorial). This means that all eBay specific text and graphics will be left in plain white no matter what.

1.) First you will need to select the image you wish to use for your ad background. Make any changes necessary to it so that it will look good with your ad.

NOTE: If you only want a solid color as a background Using the full page method, you will need to create a tiny image filled with the solid color you wish to use... Then proceed to step 2.

2.) After the image is ready, it is time to upload the image. If you already have an image host that you store pictures on, you can upload it to that server as usual. Otherwise you can use one of the free image hosting services and using their online service you can upload the background. A tutorial is found within Dominant Ad Creator which guides you through the complete upload process if you do not know how.

3.) Once the image is uploaded, you need to get the absolute image path of it. An example follows:

Absolute Image Path: http://www.imagehosting.com/milzzy/background.jpg

NOTE: If you are using one of the free hosting services, there may be a special link that you need to use in order to have the picture appear in your listing. One such free hosting service is PhotoIsland, which requires you use a specified address for auctions etc.

4.) Using the image path for the background, insert the following code into the TOP of the description field where you list your item. Make sure you change the red text below to the actual image url of your background.

<BODY <style> <!--Body {background: url(http://www.yourpictureurl.com/image.jpg)}--> </style><body background=http://www.yourpictureurl.com/image.jpg>

5.) All that is left is to finish listing your auction. Provided that you have entered the correct image path, when you view your ad online the background will appear!



Creating A Background In A Table (Description only)

Probably the BEST way to include a background in your ad is to do so by putting the entire description in a table, and adding a background to the table. If that sounds like a foreign language, don't worry... Here are the steps!

1.) If you wish to use an actual image as a background (not just a color), you will need to go through steps 1 & 2 as seen in the full page tutorial above. If you only wish to use a solid color for the background, you can move on!

2.) Now insert the code below into the TOP portion of your description box where you list your item.

<TABLE WIDTH="100%" BGCOLOR="color" BACKGROUND="http://www.yourpictureurl.com/image.jpg"> <TR><TD>

If you plan on using a solid color, change the 'color' text above to either an HTML color value or in most cases you may enter a standard color such as 'blue'.

If you are going to be using an actual image for the background, replace the sample url text above with the absolute image path of your picture.

If you wish to have your auction background / description not so close to the edge of the screen, simply change the 100% to a smaller value (the percentage indicates what percentage of the screen width the table will occupy).

NOTE: If the image path you enter is invalid, the picture will not appear and the default BGCOLOR you set will be shown instead. For this reason, it is a good idea to make the solid BGCOLOR a similar shade to your image texture so the text will appear as expected even if the image is down.

3.) Now finish typing your description, and then insert the following bit of code at the very end of the description.

</TD></TR> </TABLE>

4.) Now just finish setting up your auction listing and then submit the ad! And when you view the auction, the entire description section of the ad will contain the background you specified!



Creating Complex Backgrounds (Table in a Table)

Now that you know how to create full page backgrounds and table backgrounds, I will show you some code which combines two tables to create a black border around your actual description (which can also have a different background).

<TABLE WIDTH="100%" BGCOLOR="black" BACKGROUND="http://www.yourpictureurl.com/image.jpg"><TR><TD>
<TABLE WIDTH="98%" BGCOLOR="pink" BACKGROUND="http://www.yourpictureurl.com/image.jpg" align = "center"><TR><TD>

Description Is Here!

</TR></TD></TABLE>
</TR></TD></TABLE>

The only new commands in the code above are described below:

align = "center"
This command is needed to center the second table within the 1st one
width="100%"
The 100% is used to fill the width of the user's screen with a black border
width="98%"
The 98% is used to make the 2nd table slightly smaller than the first



Previewing Your Backgrounds Etc.

You probably want to see what your background and page will look like before actually spending money listing an auction. There are many ways to do this... Below are two suggestions!

Previewing Your Background Using Notepad

1.) Open up notepad which is a standard program included with all Windows operating systems. One notepad opens, type (or paste) the code you plan on using for your auction.

NOTE: If you just wish to see how your image looks when tiled (and ensure the image path is correct), you can do so simply by entering the following code into notepad.

<Body Background = "http://www.yourpictureurl.com/image.jpg">

2.) After you have typed what you need, select FILE > SAVE. Now enter the name for the file with the extension .HTM. Do this using QUOTES or it will not save correctly!

3.) Now simply locate the file you saved and open it up (it will open in your default web browser). You should see your background and any other items you created!

Previewing Your Background Using An Online Service

1.) Simply click HERE to go to a practice HTML board where you can paste in your code and click 'See HTML' to view the background or items you entered!