How to Create Webpage Backgrounds
An attractive yet unobtrusive background for your webpage, if you do it well, gives your website a very professional look. With just a little knowledge of Photoshop or Paint Shop Pro, and even less knowledge of cascading style sheets, you can do this yourself.
Other People Are Reading
Things You'll Need
- Graphics program such as Photoshop or Paint Shop Pro Text or HTML editor
Instructions
-
Three Ways To Get Background Graphics
-
1
Two websites where you can download free webpage background images are listed in the Resources section.
-
2
If you have OpenOffice.org, the free and open productivity suite, installed on your computer, you can use the included web background images. On Windows XP, these files are located in C:\Program Files\OpenOffice.org 3\Basis\share\gallery\www-back.
The OpenOffice.org software is licensed under the GNU Lesser General Public License (LGPL) and the Public Documentation License (PDL).
-
-
3
With a program such as Photoshop or Paint Shop Pro, make your own small graphics to use as background tiles for your website.
Make a striped background tile
-
4
To make a tiny background tile in Paint Shop Pro, select "File" and then "New Image." This tile will have tiny vertical stripes in pink and white.
-
5
The image should be in 72 dpi resolution, and only 1 pixel in height and 2 pixels in width.
-
6
Select "View" and zoom in as much as necessary to see the image clearly.
-
7
In the color selector, choose white for the background color and pale pink for the paint color.
-
8
Now, select the "Paintbrush" tool.
-
9
Select the Tool Options box at the top of the screen. A window will appear with "Tool Options--Paint Brush." Select "Square" for the brush shape and "1" for the size.
-
10
Lightly touch the Paintbrush to the right-hand side of your picture. It will turn pink.
-
11
Save your work with a name such as whitepink.jpg.
Apply the background to your webpage
-
12
Make a style sheet for your webpage, containing this snippet of code:
body { background-image: url(whitepink.jpg);
background-repeat: repeat; }This makes an allover background for your webpage. To have the image repeat only vertically, you would give the command "repeat-y," or "repeat-x" to have it repeat only from left to right. To display the image only once, the command is "no-repeat."
-
13
Save your style sheet as feb09.css or whatever name you want to use.
-
14
Put this little bit of code somewhere within the <head> of your HTML page.
<LINK REL="stylesheet" type="text/css" href="feb09.css">
-
15
Upload your HTML page, the feb09.css file, and the background graphic tile to your website, remembering to use the binary mode for the graphic and regular ASCII mode for the two text files.
-
16
Now look at the page you just made in your browser. It will resemble the example at left.
-
1
Tips & Warnings
For easier reading, the text on your webpage should contrast with the colors you use in your background.
Large graphic files cause webpages to load slowly. Make your graphic files as small as possible, both in terms of file size and the size of the displayed graphics.
