Web Design Backgrounds and Textures with How to Tips
The following backgrounds and textures were designed for web designers to use as backgrounds on web pages and are free to use (I designed them myself using Fireworks or Photoshop). The colors often found in textures in graphics programs can safely be ignored unless you really like the color provided as colors can be manipulated in a good graphics program. Choose the background tiles mainly for their texture and then adjust the hue, saturation or brightness with your graphics program. See sample backgrounds below.
How to make a Plain Color Background
In order to provide a plain color background you just need to put the Hex code for the color in your CSS file as shown below. Be sure and include the pound sign (#) and quotes around the number where needed. The colors numbers can be found on the w3schools Color Picker.
<body bgcolor="#333366">
<table bgcolor="#333366">
Css file: color:#333366;
The PageTutor Color Picker is a neat online tool that allows you to pick a background color, then choose text colors, link colors, compare them to a graphic, etc. and see them displayed online as they are chosen. It also provides the related code to put in your CSS file.
The Color Wizard is another tool that allows you to input any color number or Hex code for a color and then request complimentary colors to go with it for the background or other items on the page.
Use Contrasting Font and Text Colors
Keep in mind that text on a light background may need to be bold and in a dark color, or very light color if on a dark background (if you want a background in a plain color use the color chart above also). Also keep in mind medium green on a medium red background may look all the same color of gray to someone who is color blind.
Manipulating Background Textures
The first set of textures shown below are of waves. This texture, along with many others, can be changed into different colors with a good graphics program. The texture samples below will give you an idea of what can be done with the images.
How to apply a Background Image to your Web page
Put the following in your CSS file for a background image:
background-image:url(BackgroundImageNameGoesHere.gif);
background-repeat:repeat;
If you've done it correctly this one image will spread horizonally and vertically throughout your page.
Texture Samples
Smudge Textures
Almost White
Pale Blue
Pale Green
Pale Pink
Pale Lavendar
Blue Wave Texture
Blue Wave
Gray Wave
Purple Wave
Ice Crystal Background
Ice Crystals
Ice Crystal light
Ice Crystal pale
Crystal Rock
This image was made by scanning a crystal rock.
Crystal Rock
Crystal Rock Lite
Crystal Rock Pale
Red, Gray and Cream Bricks
Small Red Bricks
Small Gray Bricks
Small Creamy Bricks
Black Noise
Black Noise Dark
Black Noise Charcoal
Black Noise Dk Gray
Black Noise Lt Gray
Parchment
Gray Parchment
Light Gray Parchment
Very Lt Gray Parchment
Cream Parchment
Tan Parchment
Cream Parchment
Light Cream Parchment
Tan Background Tiles
Lt Beige Tile Texture
Beige Tile with Texture
Dk Beige Tile Texture
Also see How to make a Speckled Texture with the Noise Feature in Photoshop
White Marble
White Marble
White Marble Light
Very Light White Marble
Leather and Paper
Light Gray Leather
Gray Leather
White Paper
You can see how the White Paper Texture looks as a background with text over it on Endtime Poetry.
Semi-transparent Backgrounds
The following image links to a page with instructions on
How to Design a Semi-transparent Background Over Another Image
Using an image of a Horse for the Background
The example to the right is a faded picture of a horse designed to go under text. In Photoshop you go to Image/Adjust/Brightness Contrast and adjust the setting until it's light enough. The example shown here is a thumbnail of the original which was large enough so only one horse appeared on the page.
Using Initials for the Background
The image of initials is faded enough so the image won't interfere with the text on the page.
Using a landscape scene for a Background
This example is an image that covers the background of a small page and tiles to the right with text overlaying the image. The contents of the page can't be any longer than the image and the text needs to be placed where the darkest parts of image won't distort the text. The image needs to be able to tile to the right but not downwards. A landscape scene with lots of sky will usually work for this.
Also see using CSS to set up an image with a plain colored background and several tutorials on designing different
backgrounds on the Background Tutorials page
Lori Eldridge
Copyright © 4-8-2001 - Updated 11-04-20
All Rights Reserved
Other texture and background sites
The Background Tiles on this page are free to use as Public Domain images, however, for all other images on this site see the following:
