LWD logoLori's Web DesignLWD logo

Web Design Backgrounds and Textures How to Tips



Recent Visitors.

Thanks for visiting

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 code for the color in your CSS file, body tag, table tag as shown below. Be sure and include the Pound sign (#) and quotes around the number where needed. The hexadecimal color number for web safe colors can be found in the chart below.

<body bgcolor="#333366">

<table bgcolor="#333366">

Css file: color:#333366;

Web Safe Hexadecimal Color Chart

The colors in the Web Safe Hexadecimal Color Chart should display correctly on all browsers, however, most browsers support thousands of colors now so try other colors if you want.

Color Picker is a neat online tool that allows you to pick a background color from a web safe color chart, then choose text colors, link colors, compare them to a graphic, etc. and see them displayed online as they are chosen. Color Picker also provides the related code to put in your body tag. It also has a downloadable version to use offline

Color Wizard is another tool that allows you to input any color number or Hex code for a color (not necessarily web safe colors) and then request complimentary colors to go with it for the background or other items on the page.

Use Contrasting Font and Text Colors

Please 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 code for a background image in the body tag of your page:

    background="Put_Name_Of_Image_Here.jpg"

Or 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

Almost White Almost White Pale Blue Pale Blue Pale Green Pale Green Pale Pink Pale Pink Pale Lav Pale Lavendar

Blue Wave Texture

Blue Wave pattern Blue Wave Gray Wave pattern Gray Wave Purple Wave pattern Purple Wave

Ice Crystal Background

Ice Crystal Background
Ice Crystals
Ice Crystal Background
Ice Crystal light
Ice Crystal Background
Ice Crystal pale

Crystal Rock Texture

This image was made by scanning a crystal rock.
Crystal rock
Crystal Rock
Crystal rock lite
Crystal Rock Lite
Crystal rock pale
Crystal Rock Pale

Red Brick Texture

Small Brick pattern
Small Red Bricks
Small Gray Brick pattern
Small Gray Bricks
creamy brick pattern
Small Creamy Bricks

Black Noise Texture

Black Noise Dark
Black Noise Dark Black
Black Noise Charcoal
Black Noise Charcoal
Black Noise Dark Gray
Black Noise Dark Gray
Black Noise Light Gray
Black Noise Light Gray

Parchment Texture

Gray Parchment
Gray Parchment
Light Gray Parchment
Light Gray Parchment
Very Light Gray Parchment
Very Light Gray Parchment

Cream Parchment Texture

Tan Parchment
Tan Parchment
Cream Parchment
Cream Parchment
Light Cream Parchment
Light Cream Parchment

Tan Background Tiles

a light Beige tile with texture and noise blurred
Light Beige Tile with Texture
Beige tile with texture and noise blurred
Beige Tile with Texture
Beige Tile with Texture
Darker Beige Tile with Texture

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

White Marble Texture

White Marble gif
White Marble
white marble light gif
White Marble Light
white marble ex light gif
Very Light White Marble

Light Gray Leather Texture

light gray leather

Gray Leather Texture

Gray Leather

White Paper Texture

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
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 example to the left is initials with the initials faded enough so they won't interfere with the text on the page.

Using a landscape scene for a Background

The example to the right 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. background image with text overlay

Google



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 © 2001-4-8 - Updated 11-26-14
All Rights Reserved

Other texture and background sites


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


Twitter     Google+     Facebook     linked in