[hardwired]

Code:

public void paint(Graphics g) {
    //Here it draw the white background,
    // and I want to change this to an image.
//    g.setColor(Color.white);
//    g.fillRect(0, 0, getWidth(), getHeight());
    // Okay, then draw the image at this place in your code:
    g.drawImage(yourImage, x, y, this);

    g.setColor(Color.gray);
    //Here it put in the gray grids.
    if (fpPoints != null && fpPoints.length > 0) {
        for (int i = 0; i < fpPoints.length; i++) {
            g.drawLine(0, pix_grid * i, getWidth(), pix_grid * i);
        }
        for (int j = 0; j < fpPoints[0].length; j++) {
            g.drawLine(pix_grid * j, 0, pix_grid * j, getHeight());
        }
    }

For custom drawing it is better to override the paintComponent method as recommended in the JComponent class api (see the paint method).
If you choose to do so be sure to call super.paintComponent(g) before drawing. This will cause the background to be filled with the background color and will avoid artifacts. This is not necessary when overriding the paint method.

The basic idea in drawing is to draw the bottom layer first and the top layer last. You can draw yout image followed by your grid and the grid will appear between your eye and the image.

I attached the whole thing I am working on here, please have a look.
I looked at the first zip file but was unable to do much with it.