Gradient Backgrounds for Body and Header Give a Smooth Appearance to WP

The structure of many WordPress themes includes a width definition for the actual blog contents so that there is an empty space on either side of said contents in most modern computer screens. Not many people use 800×600 resolution these days, so some designers argue that the default or standard size of window that we should design for can be larger than 800 x 600 pixels.

Even though the size of standalone monitors and laptop screens are much larger than they were 3-4 years ago, I would bet that many people do not run their browsers at full screen on such large monitors. With Windows Vista, for example, the new sidebar feature takes up a width of 150px which may take away from the browser real estate.

Also, with the ability of modern computers to run several programs at one time, people operate them in this fashion. It’s convenient to be able to see more than one program at a time and if browsers are constantly run at full screen that’s not allowed. Besides, it’s very difficult to read all the way across such large computer screens.

So, we are left with the current state of affairs where most blogs and Web pages have these spaces running down the sides of the real content. Should those spaces be left blank to have a white background?

Let’s make it a bit more interesting and put some color in there. Instead of choosing a background color for the body tag, why not use a gradient? Gradients can be designed with any choice of colors and blending between the colors is up to your imagination.

Open up The GIMP and create a new file 300-400px wide and at least 1000px in height. The width doesn’t really matter here as we’ll trim that down to a couple pixels when we’re satisfied with the gradient we’re making. The height can be much longer – it just depends how fast you want to see the gradient run out when you scroll down your pages.

Double-click on the gradient tool button to open the gradient tool options dialog:

The GIMP dialog box.

The gradient tool is selected in The GIMP.

latest gradient highlighted in tool options

The last-used gradient appears in the gradient toolbox window.

Click on the gradient to bring up a list of the available gradients. Click on a gradient that you like to make it the current gradient. Checking the Reverse checkbox will flip the gradient left-to-right. Changing the shape from linear to radial or conical by clicking the Shape drop-down arrow can give some interesting effects, but for our background gradient we’ll leave the shape at linear.

In your new image click-n-drag the cursor from the top to the bottom of the image. When you release the pointer the gradient will appear and fill the whole image.

Considering download times we’ll trim the gradient background image instead of using this giant image as the background. Click on the rectangle selection tool so you can cut out a slice of the huge gradient image.

rectangular selection tool

The rectangle selection tool is used to select or cut out portions of an image.

In your gradient image select a rectangular portion that is 1-2 pixels wide and 1000 (or more) pixels tall, then copy your selection to the clipboard with Ctrl-c.

Open a new file using the menu, File/New. Notice that the new image size matches your selected area of the large gradient image, so click on OK. Type Ctrl-v to paste the skinny gradient into the new image. As you can tell it is difficult to see the colors in such a skinny image. That is why we use 300-400 pixel wide image to start with – it gives you an idea of what the gradient on your Web page will look like.

Save the new skinny gradient image as a jpg file and export it from The GIMP.

export image from the gimp dialog box

An export jpg window may come up as you save the jpg file. Click “Export” to save it.

To place the gradient in your Web page add a couple lines to both the header and body tags in the CSS stylesheet:

background-image: url(skinny-gradient.jpg);

background-repeat: repeat-x;

This tells the browser to repeat the skinny gradient across the page, but not down the page. Save the gradient jpg in the WordPress theme folder and now it becomes part of your new theme.

6 thoughts on “Gradient Backgrounds for Body and Header Give a Smooth Appearance to WP”

  1. Brilliant. I’m no tech wizard and these instructions were absolutely brilliant.

    Thank you so much!

  2. Yes very useful thank you but in this case the gradient style goes from the left to the right. What I want to do is to make a gradient style that goes from the top to the bottom.

  3. Hey Zed,

    You just reverse everything to make the gradient style go in the other direction. The instructions here are for a gradient that runs from top to bottom, where the colors fade out or in, according to your preference, as you scroll down the page.

    Instead of dragging the gradient tool down a blank image to create the background gradient, drag it across a blank image. That way, you’ll see the colors fade from left to right or right to left. Start with a really wide blank image that is a couple hundred pixels tall. Then, when you like the look of your gradient, cut out a thin slice that is 1-2px tall and save that as your background gradient image.

    In the stylesheet change the background-repeat value to “background-repeat: repeat-y;” and you’ll be all set. Got it?

  4. I’m having trouble completing the task. I saved the jpg in the FTP File Manager since I couldn’t figure out to save it any other way. I made a child version of shell lite–so I’m not sure how to change the header and body this way….basically I don’t know how to write the code so that it works in this situation. Any help would be more than wonderful!

  5. Hi Joy,
    What program are you using to create your gradient? Should be a simple matter to save a jpg file where ever you want to. To change the theme so that you can modify the header try checking out this post on child themes.

    Hope that helps!

Leave a Reply

Your email address will not be published. Required fields are marked *