|
Printed
from BasicTips.com,
FREE helpful articles
and tips for Webmasters and Business Owners
Copyright © 1994-2006
by BasicTips.com, a division of BasicTemplates.BIZ
All rights reserved. Republication in whole or in part in any form is not permitted.
Sponsored by BasicTemplates.BIZ
Website
Templates with External CSS and
Removable Graphics
http://www.BasicTemplates.biz
Co-Sponsored by Effective-Website-Secrets.com
Teaching webmasters effective web development and marketing techniques
via free podcasts.
http://www.Effective-Website-Secrets.com
Category: CSS
Is Your Site Ready for the Holidays? Part 3
By BasicTemplates with External CSS
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.
|