Community Central
Community Central

Having a background image with a gradient helps your main image blend into the background and look great on a variety of devices. The Theme Designer will fit an image to the user's screen in almost all cases, but if the background is being applied through custom CSS, or you simply want the image to fade at the edges, a gradient can be useful.

What are gradients?[]


A linear gradient

Background gradient step 1

The background used

Gradients are smooth transitions from one color to another. Some are linear and others are radial. Linear gradients gradually shift from one color at one point on a line to another color at a different point on that line. They are by far the most useful kind of gradient for backgrounds.

Applying gradients[]

Background gradient step 2

(Step 1) Notice the hard-edges

For this tutorial, we'll be using the image shown on the right, the well-known Windows XP background. You'll also need a program which supports gradients. In this case, we'll be using the free GIMP program.

  1. Have a look at the right image, as you can see the blue background doesn't fit at all with the image background, and there's no transition at all between the two. To fix this, we'll first have to detect the background color of the wiki. Take a screenshot of the page you're currently on and paste (CTRL+V) the image into GIMP.
  2. In GIMP, select the "Color Picker" from the toolbox on the left (GIMP color picker). Now, click on the background color of the wiki (not the background image). Now you've got the correct color to apply the gradient with.
  3. Next, open the original background in GIMP (the windows desktop one). Choose the gradient tool (GIMP gradient). Next, on the toolbox menu left, choose "FG to transparent" from the dropdown which appears by clicking on the image next to "Gradient:" (Gradient image). Now you'll be able to apply the gradient.
    Background gradient step 3

    (Step 4) Center, left. Click to enlarge.

  4. Put your mouse on the left edge of the image, in the center (see image). Now hold the mouse button and pull to the very center of the image, and release the button. Now there's a gradient on the image. Do the same for the bottom and the right.
  5. Now save the image, (File --> Save as...), and save the image as a .jpg file. In the dialogue menu that shows up, choose "Export". A new dialogue appears. There, check the "show example" checkbox. The filesize of the image will appear. Make sure it's below 300kB or you won't be able to save the background.
    Background gradient step 4

    No more hard edges!

  6. Go to Special:ThemeDesigner on your wiki and upload the image. Voilà, a nice looking background!
  7. only admin can edit it

See also[]

Further help and feedback[]