background image help, JPanel, JFrame, anything?

Question

I want to make a background image for a game I'm designing but I cant figure out the right way to get the effect I want, I want a background that can be seen behind text etc. basically having the background cover the whole JFrame / JPanel not just one section of the layout (eg BorderLayout.Center) I think it does this anyway but if it does do that how do I make the background for those transparent to see the background which is behind...

Confusing i know but I hope someone here understands what I am trying to do and can help... this is my current code. I have been playing around with the background so dont read to much in how i have written it.

import javax.swing.*;
import javax.swing.border.*;

import java.awt.*;

public class GamePanel extends JPanel {

private JTextPane playertext;
private JTextField wealthstring, currentwealth;

public GamePanel() {

    super();
    setLayout(new BorderLayout());
    setBackground(Game.getBackgroundColor());
    Border raised = BorderFactory.createRaisedBevelBorder();
    Border lowered = BorderFactory.createLoweredBevelBorder();
    setBorder(BorderFactory.createCompoundBorder(new EmptyBorder(4, 4, 4, 4), (BorderFactory.createCompoundBorder(raised, lowered))));
    add(northpanel(), BorderLayout.NORTH);
    add(eastpanel(), BorderLayout.EAST);


}


private JLabel northpanel() {

    Font northfont = new Font("Engravers MT", Font.BOLD, 12);
    ImageIcon banner = new ImageIcon("images/banner.png", "North Background");

    playertext = new JTextPane();
    playertext.setFont(northfont);
    playertext.setEditable(false);
    playertext.setText("Player: \n" + Game.getName());
    playertext.setBackground(Game.getBackgroundColor());
    playertext.setBorder(new EmptyBorder(10,10,10,10));

    wealthstring = new JTextField("Money: ");
    wealthstring.setFont(northfont);
    wealthstring.setEditable(false);
    wealthstring.setHorizontalAlignment(wealthstring.RIGHT);
    wealthstring.setBorder(null);
    wealthstring.setBackground(Game.getBackgroundColor());

    currentwealth = new JTextField();
    currentwealth.setFont(northfont);
    currentwealth.setEditable(false);
    currentwealth.setHorizontalAlignment(wealthstring.RIGHT);
    currentwealth.setBackground(Game.getBackgroundColor());
    currentwealth.setBorder(null);
    String wealthrounded = String.format("%.2f", Game.getMoney());
    currentwealth.setText(wealthrounded);

    JPanel wealthtext = new JPanel();
    wealthtext.setLayout(new GridLayout(2, 1));
    wealthtext.setBackground(Game.getBackgroundColor());
    wealthtext.setBorder(new EmptyBorder(10,10,10,10));
    wealthtext.add(wealthstring);
    wealthtext.add(currentwealth);

    JLabel northpanel = new JLabel();
    northpanel.setLayout(new BorderLayout());
    northpanel.setIcon(banner);
    northpanel.add(new JSeparator(), BorderLayout.PAGE_END);
    northpanel.add(playertext, BorderLayout.WEST);
    northpanel.add(wealthtext, BorderLayout.EAST);
    return northpanel;
}

private JPanel eastpanel() {


    JButton tab1 = new JButton("Tab 1");
    JButton tab2 = new JButton("Tab 2");
    JButton tab3 = new JButton("Tab 3");

    JPanel easttabs = new JPanel();
    easttabs.setLayout(new GridLayout(1, 3));
    easttabs.add(tab1);
    easttabs.add(tab2);
    easttabs.add(tab3);

    JPanel eastpanels = new JPanel();
    eastpanels.setLayout(new BorderLayout());
    eastpanels.setBackground(Game.getBackgroundColor());
    eastpanels.add(easttabs, BorderLayout.NORTH);

    return eastpanels;
}

}

Answer 1

Create a class that extends from JPanel and in its paint method draw an image over it. Now create a class the extends from JFrame and in its constructor set its contentpane to the object of that JPanel class like below. Now you can add components to jframe.

class SimpleTest extends JFrame {

    JButton btn = new JButton("A Game");

    public SimpleTest() {
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setContentPane(new CPane());
        getContentPane().setBackground(Color.red);
        getContentPane().add(btn, BorderLayout.NORTH);
        setSize(new Dimension(300, 300));
        setVisible(true);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                new SimpleTest();
            }
        });
    }
}

class CPane extends JPanel {

    Image back;

    public void paintComponent(Graphics g) {
        super.paintComponent(g);

        try {
            back = ImageIO.read(getClass().getResource("back.jpg"));
        } catch (Exception ex) {
        }
        g.drawImage(back, 0, 0, this);
    }
}

If you want to make a jpanel transparent then do

panel.setOpaque(false);

Answer 2

So if you already have a JPanel that has your image as Background and you want to add another panel over it with your components you can use Opacity to achieve this. Only the components added to this panel will be visible. Here's the code :

import java.awt.AlphaComposite;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;

import javax.swing.JPanel;

public class TransparentPane extends JPanel {

    public TransparentPane() {

        setOpaque(false);

    }

    @Override
    protected void paintComponent(Graphics g) {


        super.paintComponent(g);


        Graphics2D g2d = (Graphics2D) g.create();

        g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0f));

        g2d.setColor(getBackground());
        g2d.fill(getBounds());

        g2d.dispose();

    }

}