Archive for May 28th, 2008
Backgrounds and Blockquotes
In this article, I’ll tell you the secrets to creating block quotes and adding backgrounds. I know you really want to read about backgrounds so I’ll cover block quotes first. Don’t worry, it’ll be quick. ; )
Block quotes are really useful tags especially if you’re quoting someone or want to separate a block of text to make it stand out. The past coding examples I did, for example, I placed in block quotes. To use block quotes, all you need to do is place the <blockquote> and </blockquote> tag before and after the block of text you want quoted. Once placed, it will automatically tab the text and separate it from the previous and next paragraph.
This, for example, is text placed in a block quote. You can choose to add images in here too. Look! It’s the Pixel Petunia favicon! You can even change the font color and so forth if you want. …Pretty neat huh? 8 )
All right, all right. I’ll get on to adding backgrounds! Sheesh!
To add a background image or to change the background color to the whole site, you need to add certain attributes to the body tag. These attributes are bgcolor for a single color or background to place an image.
For bgcolor, there are three ways to define the color: 1) name 2) hexadecimal value or 3) RGB value. In Fun with Fonts, I went over the first two. Go back if you didn’t read that part or if you want to refresh yourself. For RGB, it works like the hexadecimal in that it specifies the red, green and blue values like this: RGB(0,0,0). RGB is something that is hardly used and as I mentioned before, I prefer using names or even more, hexadecimals. If you’re dead set on using RGB, you can get these values from your graphic software. Anyways, here is three different methods of declaring a color background:
<body bgcolor=”white”> – name
<body bgcolor=”#FFFFCC”> – hexadecimal
<body bgcolor=”RGB(0,0,0)”> – RGB
Regarding colored backgrounds, try to stay away from really bright and obnoxious colors like magenta or bright yellow. They’re a real pain to the eyes if you stare at them too long. O_O
If you prefer something more fancy, you can set an image background. There are two rules for image backgrounds: 1) it has to be seamless and 2) you must be able to read text on top of it. If the background image is not seamless, it will make your site look very unprofessional and frankly, the result is quite ugly. Regarding number 2, it pretty much defeats the purpose of your site if no one can read it, no? Moving on, as with images and links, you can refer to the image relatively or absolutely.
<body background=”image/background.gif”> – relatively
<body background=”http://www.yoursite.com/images/bg.jpg”> – absolutely
As I also mentioned previously, do NOT use the absolute method and link to any other sites but your own. That is bandwidth stealing! Anyways, now that you know how to add background images, here a few sites that have some cute stuff you can use!
Cute Desktops Cute Tiles
Squid Fingers
Mysie’s Backgrounds
Japanese Backgrounds
There’s tons more sites out there that offer free backgrounds so search around and you’ll find something eventually. : )
Add comment May 28, 2008
