Backgrounds
The background tag plays an important role in the way your page looks and stands out.
Changing the background and the colors of the text on a page can completely alter the atmosphere it creates.
In order to have a background you must download a background image to your computer and upload it to a server, just as you did with your images. If you are not sure how to do this click on IMAGES and read my tutorial.
Don't forget to visit my 'LINKS' section for a nice selection of backgrounds.
PLEASE NOTE - If you're using Photobucket for your Avon website you must substitute your own information where you see the blue your background image name.gif (or.jpg).
You will need to choose the entire DIRECT LINK (second code) from Photobucket, as shown in the photo below. 'Left click' the code and it will automatically copy it for you.
Background
inside a table with a border
Inserting your background into a table is very cool because you can control the size of your background AND insert text inside of the table. You can also use a variety of borders to frame your background.
|
This is my background image. If you're using photobucket for your Avon website you must substitute your own information with the DIRECT LINK (second code) from Photobucket. |
The Code
<center>
<table width="100%" cellpadding=2 cellspacing=15 style="border: 3px solid #FCD116;"
background="your background image name.gif or(or.jpg)"
<tbody>
<tr>
<td>
Add your images, text, Avon brochures, countdown banners - whatever you like - in place of my text.
</td>
</tr>
</table>
</center>
Border Properties
Notice the yellow border around my table? The first line in the code is what sets the border properties.
|
You can manage the thickness, style and color of your border just by changing a few things in that first line of our code. Take a look at the code below.
I've color-coded the border properties to make the changes easier for you. Instructions are below the code.
The Code
<center>
<table width="100%" cellpadding=15 cellspacing=0 style="border: 6px groove #009900;"
background="your background image name.gif (or.jpg)"
<tbody>
<tr>
<td>Add your images, text, Avon brochures, countdown banners - whatever you like - in place of my text.</td>
</tr>
</table>
</center>
* BORDER COLOR - Change my #009900 (green) code to any color you choose.
* THICKNESS - Change the thickness (px) of your border by changing the 6 (purple)
to the number of your choice. The higher the number, the thicker the border. The lower the number, the thinner the border.
* BORDER STYLE - Change the style of your border by changing the groove (red) to the one of the following styles of your choice.
Choose your BORDER STYLE (each style is written inside the example) and replace it with mine. The dotted, dashed and double styles must be at least 3px for border thickness in order to be seen properly.
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset |
Background
without a border
NOT INTO BORDERS? It's super easy to make that border disappear! Simply change the 6 (purple) in the code above to a 0 (as in the code below) and voilá - no more border! And it's just that easy!
|
|
The Code
<center>
<table width="100%" cellpadding=15 cellspacing=0 style="border: 0px
#008000;"
background="your background image name.gif or(or.jpg)"
<tbody>
<tr>
<td>insert your own text and content here</td>
</tr>
</table>
</center>
Triple Background
* IMPORTANT *
The following Triple Background code is for the CENTER SECTION of your Avon website.
|
The Code
<center>
<table width="100%" border="0" cellpadding="2" cellspacing="30" background="your background image name.gif (or.jpg)">
<tr>
<td width="100%">
<center>
<table width="100%" border="1" cellpadding="2" cellspacing="5" background="your background image name.gif (or.jpg)">
<tr>
<td width="100%">
<center>
<table width="100%" border="1" cellpadding="3" cellspacing="2" background="your background image name.gif (or.jpg)">
<tr>
<td width="100%">
Insert all of your content here. Text, pictures, music codes, banners ... whatever you like. This table will grow and grow. The more stuff you add, the bigger it will get.
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
Double Background
The following Double Background code is for the CENTER SECTION of your Avon website.
|
The Code
<center>
<table width="100%" border="0" cellpadding="2" cellspacing="20" background="your background image name.gif (or.jpg)">
<tr>
<td width="100%">
<center>
<table width="100%" border="1" cellpadding="3" cellspacing="2" background="your background image name.gif (or.jpg)">
<tr>
<td width="100%">
Insert all of your content here. Text, pictures, music codes, banners ... whatever you like. This table will grow and grow. The more stuff you add, the bigger it will get.
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
Background Color
Background color only - Adding a plain background color to your page
is easy. All you need to do is put this code at the TOP of your webpage.
<body bgcolor="#0276FD">
Change my #0276FD (blue) color to any color you choose.
Check out my LINKS for some COLOR CODE websites. Just copy and paste the color code you like and replace it with the numbers in my code.
Top of Page
visitors are currently browsing this site
