Pictures on top of each other

Question

Hi all!
I have a question of how I place several images on top of each other. I have an application and I place a background image in it. Then I want to have images "on top" of the background imgage. All images is in the format .png, which can be transparent.
My problem is that when I add an transparent image, I dont see the background image through it. Instead I get the default background color (something grey/blue).
Can somebody help me with:
1) How do I put the background picture in my JFrame (I'm not sure I'm doing this correctly)
2) How do I display .png images in the JFrame so that I see the background through it?
Regards,
Andreas

Answer 1

I wrote example for AWT because in SWING it can be done very easy. Run this code, it runs fine. Use only your image files.
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Color;
import java.awt.image.BufferedImage;
import java.awt.*;
import java.awt.event.*;
public class ImageTest extends Canvas implements WindowListener {
public static void main(String[] args) {
Frame frame = new Frame("Image testing");
ImageTest instance = new ImageTest();
frame.add(instance);
frame.addWindowListener(instance);
frame.pack();
frame.setVisible(true);
public Dimension getPreferredSize() {
return new Dimension(256, 256);
BufferedImage backgroundImage;
BufferedImage alphaImage;
void initImage() {
Image img = getToolkit().createImage("D:\\temp\\JavaTests\\viewcode.jpg");
Image bkImage = getToolkit().createImage("D:\\temp\\JavaTests\\SolarEclipse.jpg");
MediaTracker Mt = new MediaTracker(this);
Mt.addImage(img, 0);
Mt.addImage(bkImage, 1);
try{
Mt.waitForAll();
}catch(Exception e){};
BufferedImage bi = new BufferedImage(img.getWidth(this), img.getHeight(this), BufferedImage.TYPE_4BYTE_ABGR);
alphaImage = new BufferedImage(bkImage.getWidth(this), bkImage.getHeight(this), BufferedImage.TYPE_4BYTE_ABGR);
Graphics gr = bi.getGraphics();
gr.drawImage(img, 0, 0, this);
backgroundImage = (BufferedImage)bi;
gr = alphaImage.getGraphics();
gr.drawImage(bkImage, 0, 0, bkImage.getWidth(this)/2, bkImage.getHeight(this)/2, bkImage.getWidth(this)/2, bkImage.getHeight(this)/2, bkImage.getWidth(this), bkImage.getHeight(this), this);
Color bl = new Color(0, 0, 0);
for (int x=0; x<bkImage.getWidth(this); x++)
for (int y=0; y<alphaImage.getHeight(this); y++) {
Color c = new Color(alphaImage.getRGB(x,y));
int r = c.getRed();//x*4;
int g = c.getGreen();//y*4;
int b = c.getBlue();//255 - (x+y)*2;//Math.abs(y*8-255);
// Make transparent colors, which look like black
int a = (r == b && g == b && r < 100 && g < 100 && b < 100)?0:255;
int vv = (a<<24) | (r<<16) | (g<<8) | b;
alphaImage.setRGB(x, y, vv);
public void paint(Graphics gfx) {
if (backgroundImage == null)
initImage();
gfx.drawImage(backgroundImage, 0, 0, this);
int i = 0;
int delta = 100;
gfx.drawImage(alphaImage, i, i, this);
gfx.drawImage(alphaImage, i + delta, i + delta, this);
gfx.drawImage(alphaImage, i + delta*2, i + delta*2, this);
gfx.drawImage(alphaImage, i + delta*3, i + delta*3, this);
gfx.drawImage(alphaImage, i + delta*4, i + delta*4, this);
gfx.drawImage(alphaImage, i + delta*5, i + delta*5, this);
void exitForm(java.awt.event.WindowEvent evt) {
System.exit(0);
public void windowActivated(java.awt.event.WindowEvent windowEvent) {
public void windowClosed(java.awt.event.WindowEvent windowEvent) {
public void windowClosing(java.awt.event.WindowEvent windowEvent) {
System.exit(0);
public void windowDeactivated(java.awt.event.WindowEvent windowEvent) {
public void windowDeiconified(java.awt.event.WindowEvent windowEvent) {
public void windowIconified(java.awt.event.WindowEvent windowEvent) {
public void windowOpened(java.awt.event.WindowEvent windowEvent) {