HTML background images

HTML background images

It is relatively simple to put a texture or picture in the background of your webpage. You need only add the background= attribute to the body tag and, of course, include the correct path to the picture (i.e. <body background="images/yourpic.jpg">). It is an altogether different issue to make the background blend nicely with itself (explained below) and the colors you have chosen for your text and links. To create simple, but nice, background in PaintShop Pro follow the steps listed below:

Create a new PSP document (File > New) with a width and height exceeding 100 pixels and a desired starting color. Note: It is recommended that you choose light colors if your text is dark and the reverse if your text is light.

Ensure that your control palette is visible. (View > Toolbars)

Select the Airbrush button on the left most toolbar.

Choose a paper texture.

Switch tabs in the control palette and enlarge the spray size.

Choose a foreground color to spray (Figure 1)

Spray lightly across the document.

Choose the selection tool (dotted rectangle) from the left most Toolbar.

Figure1

Select a 50x50 area (towards the middle) as indicated in the size indicator (Figure 2)
Hint: Look in the bottom left.

Choose Selection > Convert to seamless pattern.

Save the new background to an appropriate location.

Figure 2

What to do next

Create a new webpage called search.html. Get on the web and type in the address http://www.lightlink.com/coachmol/school/ and click the Search button. You are welcome to use the links you find there to complete the exercise. You may also wish to click the Yahoo Search Engine button that will provide you with an extensive list of search engines.

The exercise

Create a webpage with the text (font size=6) Search engines. Create list of at least 10 search engines (font size=5). You may set your text color in the body tag or using the <font color="C0C0C0"> attribute. Next, create a list (ordered or unordered) of links using the search engine Internet addresses that you located above. Additionally, you should include a nicely blended background image that you create today. Note: All tags appropriate to a webpage (including a title) should be included in this new webpage.

Home