Web Design Backgrounds and Textures 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.
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:
If you've done it correctly this one image will spread horizonally and vertically throughout your page.
Blue Wave Texture
Ice Crystal Background
Ice Crystal light
Ice Crystal pale
This image was made by scanning a crystal rock.
Crystal Rock Lite
Crystal Rock Pale
Red, Gray and Cream Bricks
Small Red Bricks
Small Gray Bricks
Small Creamy Bricks
Black Noise Dark
Black Noise Charcoal
Black Noise Dk Gray
Black Noise Lt Gray
Light Gray Parchment
Very Lt Gray Parchment
Light Cream Parchment
Tan Background Tiles
Lt Beige Tile Texture
Beige Tile with Texture
Dk Beige Tile Texture
White Marble Light
Very Light White Marble
Leather and Paper
Light Gray Leather
You can see how the White Paper Texture looks as a background with text over it on Endtime Poetry.
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
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
Copyright © 4-8-2001 - Updated 7-21-17
All Rights Reserved