I am trying to set a background image in Eclipse using Java

Question

I am trying to set a background image in Eclipse using Java and I think that I have most of it done.

I am trying to make a 2D game and I want to add a background image to my menuJFrame which you will see below.

I have this code already:

This is my main class JFrames:

 import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;

    import javax.swing.JButton;
    import javax.swing.JFrame;
    import javax.swing.JLabel;
    import javax.swing.JPanel;

    public class JFrames extends JPanel implements ActionListener {
    JFrame menuJFrame,howToPlayJFrame, level1JFrame;
    JPanel menuJPanel,howToPlayJPanel;
    JButton howToPlayButton,backToMainMenuButton,startGameButton, quitProgramButton;
    JLabel howToPlayLabel;

    public static void main(String [] args){
        JFrames jframes = new JFrames();
    }
    public JFrames(){
        //menuJFrame
        menuJFrame = new JFrame("SquareRun/Menu");
        menuJFrame.setVisible(true);
        menuJFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        menuJFrame.setSize(800, 600);
        //menuJPanel
        menuJPanel = new JPanel();
        menuJFrame.add(menuJPanel);
        howToPlayButton = new JButton("How To Play");
        menuJPanel.add(howToPlayButton);
        howToPlayButton.addActionListener(new ActionListener(){
            public void actionPerformed(ActionEvent e) 
            {
                if (e.getSource() == howToPlayButton){
                    howToPlayJFrame.setVisible(true);
                } 
            }});
        startGameButton = new JButton("Start Game");
        menuJPanel.add(startGameButton);
        startGameButton.addActionListener(new ActionListener(){
            public void actionPerformed(ActionEvent e) 
            {
                if (e.getSource() == startGameButton)
                    level1JFrame.setVisible(true);
                menuJFrame.setVisible(false);
            }});
        quitProgramButton = new JButton("Quit Game");
        menuJPanel.add(quitProgramButton);
        quitProgramButton.addActionListener(new ActionListener(){
            public void actionPerformed(ActionEvent e) 
            {
                if (e.getSource() == quitProgramButton){
                    menuJFrame.dispose();
                }
            }});
        //howToPlayJFrame
        howToPlayJFrame = new JFrame("SquareRun/HowToPlay");
        howToPlayJFrame.setVisible(false);
        howToPlayJFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        howToPlayJFrame.setSize(600, 100);
        //howToPlayJPanel
        howToPlayJPanel = new JPanel();
        howToPlayJFrame.add(howToPlayJPanel);
        howToPlayLabel = new JLabel("Use the arrow keys to move, Up= jump, Down= down, Right= right, Left= left");
        howToPlayJPanel.add(howToPlayLabel);
        backToMainMenuButton = new JButton("Close Window");
        howToPlayJPanel.add(backToMainMenuButton);
        backToMainMenuButton.addActionListener(new ActionListener(){
            public void actionPerformed(ActionEvent e) 
            {
                if (e.getSource() == backToMainMenuButton){
                    howToPlayJFrame.setVisible(false);
                    howToPlayJFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                }}});
        //level1JFrame
        level1JFrame = new JFrame("Level 1");
        level1JFrame.setVisible(false);
        level1JFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        level1JFrame.setExtendedState(JFrame.MAXIMIZED_BOTH);
    }
    public void actionPerformed(ActionEvent e) {
    }
    public Object getCurrentLevel() {
        return null;
    }

}

This is my background class:

import java.awt.Image;

import javax.swing.ImageIcon;

public class Background extends JFrames {
    private JFrames game;
    private Image image;

    public Background(JFrames game){
        this.game = game;
        image = (new ImageIcon("Image001.png")).getImage();

    }
}

Answer 1

You can get an image using this code

image = (new ImageIcon(this.getClass().getResource("Image001.png"))).getImage();

assumed the file with an image is in the same folder as this class.

Answer 2

Don't create classes starting with J, it's just confusing, especially when there is a JFrame class and you've created a class called JFrames which extends from JPanel...now I'm just confused...

The first problem you're having is the fact that you don't actually use or add your image to anything within your Background class...

The basic solution to your question would be to use a JLabel as the background component, supply it with a layout manager and add your components to it.

public class Background extends JLabel {

    public Background() {
        setIcon(new ImageIcon("Image001.png")));
        // Don't forget to set the layout...
    }
}

Then you would just simply set the layout manager to your needs and add the components to it.

The problem with this is, it won't resize the image when the component is resized. To achieve this, you will need to provide a means by which you can take control over the painting of the image.

This will require you to extend you Background class from something like JPanel and override it's paintComponent method, painting the image as you see fit.

Take a look Performing Custom Painting for more details.

This will require to provide some kind of scaling operation to the image. While there are a number of ways to scale an image in Java, there are a number of issues you need to be aware of. Take a look at The Perils of Image.getScaledInstance()

This raises a bunch of new questions, to you want to scale them and preserve the aspect ratio? If so, do you want to fit the image to available area or fill it (so it will always cover the available space)?

Take a look at Java: maintaining aspect ratio of JPanel background image for more details.

I'd also, strongly, recommend that you take a look at The Use of Multiple JFrames: Good or Bad Practice? and http://docs.oracle.com/javase/tutorial/uiswing/layout/card.html which will help you generate a less confusing user experience, IMHO.

You should also take a look at Reading/Loading an Image as an alternative to ImageIcon, as it has the capacity to read more file formats, but will also throw an IOException when it can't read the image, which can be very helpful in diagnosing missing image issues.