You can find ideas for new, different background graphics by checking out some of the CSS galleries on the web, such as CSS Drive and CSSelite.
Sites like these should be used only for inspiration, not theft. Be careful when using images from outside sources.
You want to use only graphics and images that you have been given the right (through express permission or reuse licenses) to use on your site. For this reason, always purchase graphics from reputable sources, such as these three online-graphics sites:
- iStockphoto: iStockphoto has an extensive library of stock photography, vector illustrations, video and audio clips, and Adobe Flash media. You can sign up for an account and search libraries of image files to find the one that suits you or your client best. The files that you use from iStockphoto aren’t free; you do have to pay for them. Be sure that you read the license for each image you use.
The site has several licenses. The cheapest one is the Standard License, which has some limitations. You can use an illustration from iStockphoto in one website design, for example, but you can’t use that same illustration in a theme design that you intend to sell multiple times (say, in a premium theme marketplace). Be sure to read the fine print!
- Dreamstime: Dreamstime is a major supplier of stock photography and digital images. Sign up for an account, and search the huge library of digital image offerings. Dreamstime does offer free images at times, so keep your eyes out for those! Also, Dreamstime has different licenses for its image files, and you need to pay close attention to them.
One nice feature is the royalty-free licensing option, which allows you to pay for the image one time and then use the image as many times as you like. You can’t redistribute the image in the same website theme repeatedly, however, such as in a template that you sell to the public.
- GraphicRiver: GraphicRiver offers stock graphic files such as Adobe Photoshop images, design templates, textures, vector graphics, and icons, to name just a few. The selection is vast, and the cost to download and use the graphic files is minimal.
As with all graphic and image libraries, be sure to read the terms of use or any licensing attached to each of the files to make sure you’re abiding by the legal terms.
Another great resource for free graphics is Smashing Magazine. Click the Freebies in the Graphics section to find hundreds of links to free (and often reusable) graphics, such as textures and wallpapers for your site.
To best use background graphics, you must answer a few simple questions:- What type of background graphic do you want to use? You may want a repeatable pattern or texture, for example, or a black-and-white photograph of something in your business.
- How do you want the background graphic to display in your browser? You may want to tile or repeat your background image in the browser window, or pin it to a certain position no matter what size your guest’s browser is.
When working with graphics on the web, use GIF, JPG, or PNG image formats. For images with a small number of colors (such as charts, line art, and logos), GIF format works best. For other image types (screen shots with text and images, blended transparency, and so on), use JPG (also called JPEG) or PNG.
For web design, the characteristics of each image file format can help you decide which file format you need to use for your site. The most common image file formats and characteristics include the following:- JPG: Suited for use with photographs and smaller images used in your web design projects. Although the JPG format compresses with lossy compression, you can adjust compression when you save a file in JPG format. That is, you can choose the degree, or amount, of compression that occurs, from 1 to 100. Usually, you won’t see a great deal of image quality loss with compression levels 1 through 20.
- PNG: Suited for larger graphics used in web design, such as the logo or main header graphic that helps brand the overall look of the website. A
.pngfile uses lossless image compression; therefore, no data loss occurs during compression, so you get a cleaner, sharper image. You can also create and save a.pngfile on a transparent canvas..jpgfiles must have a white canvas or some other color that you designate. - GIF: Suited for displaying simple images with only a few colors. Compression of a .gif file is lossless; therefore, the image renders exactly the way you design it, without loss of quality. These files compress with lossless quality when the image uses 256 colors or fewer, however. For images that use more colors (higher quality), GIF isn’t the greatest format to use. For images with a lot of colors, go with PNG format instead.