Having a background that is creative and easy on the eyes and one that complements the feel of your website is essential. You don’t want a background that is black if you plan on using black text for example. You also don’t want a background that is so busy it will give you a headache. Always test out your page before publishing it to the Internet.
Solid Color Backgrounds
To set a solid background color on your website add bgcolor=”value” in the body tag of your html. For example. If I want my website to have a pink background my body tag would look like this:
or I can be more specific with the shade of pink I want and use a hex code as follows:
You can also add the bgcolor attribute to several other tags but the most common uses are in the body of your page and in tables.
Image Backgrounds
When setting an image background on your webpage first and foremost you need to have your image uploaded somewhere on the Internet. If the website where you found your background asks you to save it to your own webspace that’s what you need to do. If it’s your own background, just be sure to upload your image onto your own space. It may seem like common sense but it’s easy to forget that you haven’t put the picture online yet and then wonder why you background isn’t working.
To set an image background add background=”urlofimage.jpg” to your body tag. It will look something like this.
http://mywebsite.com/backgroundimage.jpg”>
And just like when using bgcolor you can set background images in tables as well.
If you want to get more creative with your backgrounds, using cascading style sheets will give you several more options for backgrounds. There is alot of information on the Internet on setting backgrounds using CSS. A great place to start is the Tizag CSS background tutorial.
Here are some other great places for background help and information.
w3schools HTML Images page – w3schools.com is a must have in your bookmarks if you’re interested in creating your own website. It is completely free and one of the best HTML training and help sites on the Internet.
HTML Goodies Backgrounds tutorials – HTML goodies has been around for years and is another must have bookmark for web designers and site owners. There is a reason they call it the ultimate html resource.
Webmonkey CSS Properties – If you’re interested in trying out some CSS in your page Webmonkey has a really handy page with all the most common tags listed all in one place.
Lissa Explains It All – One of the easiest to understand html websites around. Lissa gears her explanations toward kids but by no means do you have to be one to benefit from her tutorials. A great resource for people of all ages.
HTML Code Tutorial background – This page is specifically about setting backgrounds in tables. Also great though.
If you’re looking for free usable image backgrounds here are some of the best places to find them on the web.
Backgrounds by Tickie – All the backgrounds on this site are organized into categories that make it easy to find just what you’re looking for. When you go to the category page you can preview what the background looks like tiled across the page just by hovering over it.
Squidfingers patterns – One of the best places to find free patterns that can be used as backgrounds for your website is Squidfingers. There is a huge selection of high quality, not overpowering, backgrounds to choose from–and the file you download is so small it won’t eat up much of your webspace.
Tile Backgrounds Designer – This is a great tool to use if you want to create your own background image. You choose the colors, canvas, and image and then can download your finished background directly to your computer.
DinPattern – Funky doesn’t even begin to cover the patterns available for download on this site. You won’t find patterns quite like these anywhere else on the internet.
Kaliber10000 The Pixel Patterns collection – Wonderful pixelated patterns that tile wonderfully across your webpage. Just make sure you credit the creator of whatever pattern you use and read the usage-guidelines.
Shizoo – This site is in German but the patterns are still worth checking out.
Stripemania – Make your own striped background! Easy to use and fun to play with.
ColourLovers – This site is great if you want to come up with ideas for creating your own patterns. Color combinations and patterns are updated constantly and you can join the site and set up your own profile to create your own.
All Free Backgrounds – You can find hundreds of free backgrounds on this site. They’re organized by colors, patterns, and they have a few handy color tools available as well.
Entheos Free Website Backgrounds – This site is definately worth exploring when you have a spare minute. They’ve got some cute backgrounds, website templates, add-ons, and a whole lot more.
ava7 patterns – Over 1000 free backgrounds available on this site all of which are well organized. It takes a few seconds to load on slower browsers but is definately worth the wait.