Web Design Backgrounds and Textures How to Tips

The following backgrounds and textures were designed for 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 saturation or brightness with your graphics program.

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

Web Safe Hexadecimal Color Chart

The colors in the Web Safe Hexadecimal Color Chart should display correctly on all browsers. You can use colors that are not on this chart but then you may get a weird color on older browsers that don't support that color.

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 colors on a light background will need to be very 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 those with color blindness, i.e., medium green on a medium red background may look all the same color 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. 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

Pale Blue

Pale Green

Pale Pink

Pale Lavendar

Blue Wave Texture

Blue Wave

Gray Wave

Purple Wave

Ice Crystal Background

This background was made by taking a picture of ice crystals on a window.

Ice Crystals

Ice Crystal light

Ice Crystal pale

Crystal Rock Texture

This image was made by scanning a crystal rock.

Crystal Rock

Crystal Rock Lite

Crystal Rock Pale

Red Brick Texture

Small Red Bricks

Small Gray Bricks

Small Creamy Bricks

Parchment Texture

Gray Parchment

Light Gray Parchment

Very Light Gray Parchment

Cream Parchment Texture

Tan Parchment

Cream Parchment

Light Cream Parchment

White Marble Texture

White Marble

White Marble Light

Very Light White Marble

Light Gray Leather Texture

Gray Leather Texture

White Paper Texture

You can see how the White Paper Texture looks as a background with text over it on Endtime Poetry.

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

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 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.

Also see Background Patterns and several tutorials on designing different
backgrounds on the Background Tutorials page

Other texture and background sites

John C. Fish's Backgrounds and Textures

Desktop Publishing

Infinite Fish

The images, photos, animations, logos, etc., i.e., all grapics designed by Lori Eldridge utilized on this site, are under the exclusive ownership of Lori's Web Design. You can purchase ONE TIME RIGHTS to use them one time only on your web site or other medium. Please contact the webmaster for more information.

Home \| Website Redesign \| Web Design Portfolio \| Portfolio #2 \| Portfolio #3 \| Spokane Portfolio \| SEO Analysis Reports Professional Web Design Services \| Design Rates \| Links \| Site Map \|
		Serving Spokane, WA, Colfax WA, Deer Park WA, Medical Lake WA, all of Eastern WA and across the USA Lori's Web Design Spokane: 509-443-8693 or Colfax: 509-397-6000 Copyright © 2000 - 2012 All Rights Reserved		Lori's Web Design