Set background image for JPanel in Java Breakout Game

Question

Okay, this seems like a really simple task but I can't seem to get it. All I want is to have an image (jpg) as the background to my breakout game. Here is my code:

Main Class:

import java.awt.BorderLayout;
import java.awt.Color;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;


public class Breakout extends JFrame {

    public Breakout()
    {             
        add(new BreakBoard());
        setTitle("Breakout");
        setSize(BreakCommons.WIDTH, BreakCommons.HEIGTH);
        setLocationRelativeTo(null);
        setIgnoreRepaint(true);
        setResizable(false);
        setVisible(true);
    }

    public static void main(String[] args) {
        new Breakout();
    }
}

Board Class:

import java.awt.Color;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
import java.awt.Point;
import java.awt.Toolkit;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;
import java.util.Timer;
import java.util.TimerTask;
import javax.swing.ImageIcon;
import javax.swing.JLabel;
import javax.swing.JPanel;


public class BreakBoard extends JPanel implements BreakCommons {

    ImageIcon icon = new ImageIcon("../pacpix/love.jpg"); 
    Timer timer;
    String message = "Game Over";
    BreakBall ball;
    BreakPaddle paddle;
    BreakBrick bricks[];
    boolean ingame = true;
    int timerId;


    public BreakBoard() {
        setOpaque(false);
        addKeyListener(new TAdapter());
        setFocusable(true);
        //setBackground(Color.white);
        bricks = new BreakBrick[30];
        setDoubleBuffered(true);
        timer = new Timer();
        timer.scheduleAtFixedRate(new ScheduleTask(), 1000, 10);
    }

    public void paint(Graphics g) {
        super.paint(g);
        g.drawImage(icon.getImage(), 10, 10, this);

        if (ingame) {
            g.drawImage(ball.getImage(), ball.getX(), ball.getY(),
                        ball.getWidth(), ball.getHeight(), this);
            g.drawImage(paddle.getImage(), paddle.getX(), paddle.getY(),
                        paddle.getWidth(), paddle.getHeight(), this);

            for (int i = 0; i < 30; i++) {
                if (!bricks[i].isDestroyed())
                    g.drawImage(bricks[i].getImage(), bricks[i].getX(),
                                bricks[i].getY(), bricks[i].getWidth(),
                                bricks[i].getHeight(), this);
            }
        } else {

            Font font = new Font("Verdana", Font.BOLD, 18);
            FontMetrics metr = this.getFontMetrics(font);

            g.setColor(Color.BLACK);
            g.setFont(font);
            g.drawString(message,
                         (BreakCommons.WIDTH - metr.stringWidth(message)) / 2,
                         BreakCommons.WIDTH / 2);
        }


        Toolkit.getDefaultToolkit().sync();
        g.dispose();
    }

So the image is stored in variable icon and is located in my source files (along with my classes) so I know that the path is right. I tried setting the frame and panel to setOpaque(false) but that just changed the background to default grey. I can easily set the background color by setBackground(Color.white);, but how do I set an image?

I tried putting the image in a JLabel and then adding it to the JPanel, but that produced no results. I would appreciate any help, and thanks in advance! I can provide more information as needed.

Answer 1

easy way first create a separate class for jpane

import java.awt.Color;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Paint;
import javax.swing.ImageIcon;
import javax.swing.JPanel;

public class JPanelDemo extends JPanel {
    /**
     * 
     */
     private static final long serialVersionUID = 1L;
     private static final Color BACKGROUND      = Color.black;
     private static final Color BACKGROUND_2    = Color.WHITE;
     String path="/img/background.jpg";

    @Override
    protected void paintComponent(Graphics g) {
        Graphics2D graphics = (Graphics2D) g.create();        
        int midY = 100;
        Paint topPaint = new GradientPaint(0, 0, BACKGROUND,0, midY, BACKGROUND_2);
        graphics.setPaint(topPaint);
        graphics.fillRect(0, 0, getWidth(), midY);        
        Paint bottomPaint = new GradientPaint(0, midY + 1, BACKGROUND_2,0, getHeight(), BACKGROUND);
        graphics.setPaint(bottomPaint);
        graphics.fillRect(0, midY, getWidth(), getHeight());
        Image img = new ImageIcon(getClass().getResource(path)).getImage();
        int imgX = img.getWidth(null);
        int imgY = img.getHeight(null);
        graphics.drawImage(img, (getWidth() - imgX) / 2, (getHeight() - imgY) / 2, imgX, imgY, null);
      //  graphics.dispose();
    }
}

how use it

JPanelDemo contentPane = new JPanelDemo();