How to display an image as a background on a JPanel

Question

I have problem with displaying the image on JPanel when I rescaled the image according to the size of the JPanel. The image did not appear.

   public class createGUII extends JFrame{
        String [] background = {"c1.jpg","c2.jpg","c3.jpg","c4.jpg"};                       
        ArrayList<String> bgPicturesFiles   = new ArrayList<String>(Arrays.asList(background)); 


    JPanel panel;
    ImagePanel imgBg;

    public createGUII(){
        GridBagLayout m = new GridBagLayout();
        Container c = getContentPane();
        c.setLayout (m);
        GridBagConstraints con = new GridBagConstraints();

       //Panel for background
        panel = new JPanel();       
        panel.setSize(600, 600);
        con = new GridBagConstraints();
        con.anchor=GridBagConstraints.CENTER;
        con.gridy = 1;      con.gridx = 0;
        con.gridwidth = 1;  con.gridheight = 1;     
        m.setConstraints(panel, con);   
        c.add(panel);

       //randomized the image files
        Random r = new Random();                        
        int random = r.nextInt(bgPicturesFiles.size());

       //rescale the image according to the size of the JPanel 
        imgBg = new ImagePanel(new ImageIcon(bgPicturesFiles.get(random)).getImage().getScaledInstance(panel.getHeight(), panel.getWidth(),Image.SCALE_SMOOTH));            
        panel.add(imgBg);

        setResizable(false);
        setVisible(true);       
        setExtendedState(getExtendedState()|JFrame.MAXIMIZED_BOTH);             

    }

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



class ImagePanel extends JPanel {
    private Image img;

    public ImagePanel(String img) {
        this(new ImageIcon(img).getImage());
    }

    public ImagePanel(Image img) {
        this.img = img;
        Dimension size = new Dimension(img.getWidth(null), img.getHeight(null));
        setPreferredSize(size);
        setMinimumSize(size);
        setMaximumSize(size);
        setSize(size);
        setLayout(null);
        }

    public void paintComponent(Graphics g) {
        g.drawImage(img, 0, 0, null);
        }
}     

Answer 1

Have a look at this: JPanel background image, JPanel with background image, with other panels overlayed

The second link mentions that you have to do some custom painting for scaling. This is a problem. I wouldn't scale the image every single time in the paintComponent method, but do it once if the width and height have been changed since the last call, and in that case, recreate a BufferedImage containing the image which you blit every single time before calling the superclass paintComponent, scaled up to the right size (use something like Image scaling does not work when original image height & width is smaller the scaling height & width). I can see an issue where it might try to fill the panel with a colour when you call the superclass paintComponent method, but you'll have to experiment.