Is Your Site Ready for the Holidays? Part 2

In November 2003, we published an article that gave you some ideas on how to quickly ready your site for the holiday season by adding a touch of holiday spirit to your website's logo. If you did not read it, you can do so here: Is Your Website Ready for the Holidays? Part 1

In Part 2 of "Is Your Website Ready for the Holidays?" we will show you how to use a holiday image within your external style sheet as a background and a border. Using this concept will allow you to make these changes on every page of your site within seconds by simply editing one file. And just as important, you can change your web site back to its normal appearance, after the holidays are over. If you are not familiar with external CSS and the important difference between it and inline CSS and internal CSS, you may find these articles of high interest: The Advantages of Using External CSS and CSS: External, Internal or Inline? Which Method is Best?

Let's get started, shall we? Note that in each example below, we give you the code that you should copy/paste into your *external* style sheet associated to the BODY tag. We also supply you with a linked page that illustrates what the page will look like using each effect. When you use your own images, be sure to change the image name and specify the path to your image on your server.

Where can you find quality holiday graphics? Glad you asked! ;) If you need holiday borders and backgrounds, we have them too. You can get 52 custom-made Christmas backgrounds and borders for a very low fee. [ More Info ]

Border: Tiled horizontally at the top of each page. [ View Sample Page ]

External CSS Code:

body { background-image: url(bells-sample.gif); background-repeat: repeat-x;}

Border: Tiled horizontally at the bottom of each page. [ View Sample Page ]

External CSS Code:

body { background-image: url(lightspine-sample.gif); background-repeat: repeat-x; background-position: left bottom;}

Border: Tiled vertically on the left side of each page. [ View Sample Page ]

External CSS Code:

body { background-image: url(hollypeppermint-sample.gif); background-repeat: repeat-y;}

Border: Tiled vertically on the right side of each page. [ View Sample Page ]

External CSS Code:
body { background-image: url(hollypeppermint-sample.gif); background-repeat: repeat-y; background-position: right;}

Background: Full page. [ View Sample Page ]

External CSS Code:
body { background-image: url(hollypeppermint-sample.gif); background-repeat: repeat-y; background-position: right;}

Background: Within special area(s) of page. [ View Sample Page ]

External CSS Code:
.special { background-image: url(holly2-sample.gif)}

Note: This code is NOT assigned to the BODY tag. It is a custom class which we created and assigned to the TD tag of each table as shown in the example.

HTML Code to assign special custom class to the TD tag:

class="special"

This is what the HTML code for the table TD will then look like:

<td class="special">

Related Articles:
Cheap "Background Image" Tricks, Part 5
Easy Borders and Backgrounds using CSS
Background Images Only in Table Cells