Making a gradient background for your HTML page

Your browser will automatically repeat the background image for a page from left to right and top to bottom. To use a gradient for a background like the one on this page or on another I made, you need to make it as wide as most people might have their browser windows, but it can be as short as possible in the vertical dimension in order to keep the file size small.

First, create a new image 1200 pixels in width and 100 pixels in height. [File/New]

Left-click in the top square on the 'Materials Palette'. The 'Material Properties' box will come up.
Click the 'Gradient' tab.
Click the 'Down arrow' to the right of the gradient pictured.
Select a gradient from the ones you see pictured. I have chosen one called "emeraldme" which I created. You should select one you like from the ones you see in your library.
  1. If your gradient is not perfectly vertical, change the angle to 90�.
  2. You can see that "Emerald Me" is double-sided - it is dark on both outside edges and light in the middle. If you have chosen one that is one-sided, you will need to give it a repeat to make it balance. Change the repeat to '1'.
  3. If it is dark in the middle and you want it dark on the outside edges, or vice versa, select (or deselect) the 'Invert' box.
  4. If your gradient is round or square instead of straight up and down, select the button on the left.
Select the paint bucket from the toolbar. Click on the blank image to fill.

It should look like this.
Now select Image/Resize. Make sure the "Lock Aspect Ratio" box is unchecked. Change the image height to '1'.

Your image will look like this. Upload it to the Keen image loader, your site, or wherever else you store images. At the very top of your listing insert the following code:

Done!

Back to tutorials