LWD logoLori's Web DesignLWD logo

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.

<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. Click on the images below to see how each image looks on a full page.

Texture Samples

Smudge Textures

Blue Wave Texture

Ice Crystal Background

Crystal Rock

This image was made by scanning a crystal rock.

Red, Gray and Cream Bricks

Black Noise

Parchment

Cream Parchment

Tan Background Tiles

Also see How to make a Speckled Texture with the Noise Feature in Photoshop

White Marble

Leather and 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
Design Semi-transparent background over another image

Using an image of a Horse for the Background

faded horse pic as 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

initials as 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

background image with text overlay
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 4-22-17
All Rights Reserved

Other texture and background sites


The Background Tiles on this page are free to use Public Domain images, however, for all other images on this site:


Twitter     Google+     Facebook     linked in