Is Your Site Ready for the Holidays? Part 3

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 mid December 2003, we published a second article in this series that showed you how to use a holiday image within your external style sheet as a background and a border. If you miss that one too, you will find it here: Is Your Website Ready for the Holidays? Part 2

In Part 3 of our series, "Is Your Site Ready for the Holidays", we will give you a few more ideas on how to easily prepare your site with some holiday cheer.

As I write this tutorial, Christmas Day is only seven days away. There is still time though if you have not decorated your website with a touch of festivity.

But let's not forget that Christmas is only one of the up-and-coming holidays this season. Just around the corner is New Year's Day, so now is the time to prepare those images so you can quickly switch from your Christmas themed logo, backgrounds and borders to your New Year's theme on December 26th.

Idea #1: No-Repeat Background Images

One of the favorite ways to celebrate New Year's Day across the world is a nicely done fireworks display. For those folks who want to save time or do not design their own graphics, we have prepared 25 fireworks backgrounds in various colors and page orientations. View the Full Set Here

These fireworks backgrounds will look best if they are not tiled as described in Part 2 of our series. In Part 2 we are using seamless backgrounds and borders that tile (repeat on the page). To keep your background from tiling, you need to instruct it not to repeat and state where you want the background to appear on the page.

In the example External CSS code below we are instructing our BODY tag to place the background image in the top-left corner of the page, and setting the background color to black (hex code #000000) because that is the main color of the background image. We are also instructing the style sheet not to repeat the image.

body { background-color: #000000; background-image: url(fireworks23.jpg); background-repeat: no-repeat; background-position: left top}

If you want to center your background image use this External CSS code:

body { background-color: #000000; background-image: url(fireworks23.jpg); background-repeat: no-repeat; background-position: center top}

If you want your background image right justified:

body { background-color: #000000; background-image: url(fireworks23.jpg); background-repeat: no-repeat; background-position: right top}


Idea #2: Greeting Splash Page, Popup, or Digital Greeting Card

Even though are fireworks backgrounds are named "backgrounds" that does not mean you cannot use them for other digital effects for your site. Using your favorite graphics program, add text, company logo, photos of your employees (family, pets, etc.), and design an image that you can use as a greeting splash page, or a popup window when a page loads. Some folks like to send out holiday well wishes via email to their friends, family, and business partners. View Our Revised Sample Image Here

Idea #3: Logos, Headers, Buttons and Special Areas

As described in Part 1 and Part 2 of our series, you could easily use our fireworks background to enhance your current logo, header image, buttons, and as a no-repeat background in special areas of your site for the New Year's celebration.

Have fun and let us know if you use our fireworks background images for something we have not stated.