Metuchen High School: GIMP
 

12. Making a Background

5 points

Example 1

This is an example. The exercises you are asked to do are discussed below.

Consider this image of the U.S. Capitol building:

If you use this photo as a background image for a web page, here is how it looks: test.html

The background consists of multiple rows of Capitol Buildings, next to each other.

 

Now let's revise the photo to make it more appealing as a background image. The Make Seamless filter adjusts the image so that it 'tiles' more attractively when used as a background. Apply the Make Seamless filter to the photo: Filter > Map > Make Seamless.  This is the resulting image:

If you use the revised photo as a background for a web page, here is how it looks: test2.html

 

Example 2

Let's make an image suitable for use as a background, based on a gradient. (A gradient is when one color transitions gradually into a different color.)   Start by creating a new image.  Here I used the dimensions 2000 pixels wide and 10 high.  I used 2000 pixels in order to be sure that the image doesn't "wrap around" horizontally.  And I used just 10 pixels high because it is sufficient here, and it helps keep the file size small.

In the Toolbox, set up the foreground and background colors. This image will transition from green (foreground color) to white (background color). You can zoom in to 400% to work on it. Create a rectangular selection that fills this thin image. Choose the Gradient Tool. Click at the left of the new rectangle, drag all the way to the right and release.  The rectangle should fill with a color gradient.

Here's a screen shot of the background:

 


Here's how the image looks as a background: test3.html

 

Exercise

  1. Find an image that you'd like to work with and use as a background image.  Apply the Make Seamless filter to it. 

  2. Make a background with a color gradient. Generate a simple web page that shows how the image looks as a background. You can use an HTML file like this:
    <style>
    body
    { background-image:url("your image file here");
    }
    </style>

 

GIMP Links