Imagen de Fondo en Java

    Muchos preguntan como colocar una imagen de fondo a una ventana, bien sea un frame o un panel, y la respuesta mas sencilla es colocar un label y sobre ese label colocar el resto de las cosas, para ello creamos un label y le indicamos que manejara un icono, este icono sera nuestra imagen de fondo....

JLabel FONDO = new JLabel(new ImageIcon("mi/imagen.extensión"));

   Es muy importante ver que la dirección esta dada por slash (/) simple y no por el invertido (\), esta es la forma directa, aunque también podemos cargar el icono y luego agregarlo al label...

ImageIcon ICONO = new
ImageIcon("mi/imagen.extensión"); 
JLabel FONDO = new JLabel(ICONO);

   Esta es la forma más sencilla y fácil de todas, aunque existen mejores esta es una excelente soluciones para cosas sencillas y prácticas, podemos probar el siguiente ejemplo que consta de dos archivos, el .java y la imagen, para ello guardamos la imagen en nuestro disco y luego vamos con el ejemplo.

Dirección de la imagen.

import java.awt.*;
import javax.swing.*;

public class FrameFondo extends Frame {
MenuBar BARRA = new MenuBar();
Menu MENU1 = new Menu("Archivo");
Menu MENU2 = new Menu("Ayuda");
MenuItem ITEMa1 = new MenuItem("Nuevo");
MenuItem ITEMa2 = new MenuItem("Salir");
MenuItem ITEMb1 = new MenuItem("Acerca de...");
JLabel FONDO = new JLabel(new ImageIcon("C:/copypaste.jpg")); //Esta es la dirección de la imagen

public FrameFondo() {
super("Primera Ventana");
setLocation(100,100);
setSize(320,213);
setMenuBar(BARRA);
BARRA.add(MENU1);
BARRA.add(MENU2);
MENU1.add(ITEMa1);
MENU1.add(ITEMa2);
MENU2.add(ITEMb1);
this.add(FONDO);
show();
}

public boolean handleEvent(Event evt) {
if (evt.id == Event.WINDOW_DESTROY) //Método para cerrar
System.exit(0);     //el Frame (ventana)
if (evt.target instanceof MenuItem) {//Métodos a utilizar para cada opción
if("Nuevo".equals(evt.arg))
JOptionPane.showMessageDialog(null,
"Esto es solo prueba =)", "Carlitox en la web",
JOptionPane.INFORMATION_MESSAGE);
if("Salir".equals(evt.arg)) {
JOptionPane.showMessageDialog(null,
"Adios..!!", "Carlitox en la web",
JOptionPane.INFORMATION_MESSAGE);
System.exit(0);
} if("Acerca de...".equals(evt.arg))
JOptionPane.showMessageDialog(null,
"Creado por: Carlos Martínez"+
"\nSite web: www.carlitoxenlaweb.blogspot.com",
"Carlitox en la web", JOptionPane.INFORMATION_MESSAGE);
return (true);
}
return super.handleEvent(evt);
}

public static void main(String[] arg) {
JOptionPane.showMessageDialog(null,"www.carlitoxenlaweb.blogspot.com");
new FrameFondo();
}
}

   La imagen podemos colocarla en la raíz del disco duro principal (c:\) o si estamos en linux seria mejor colocarla en la carpeta personal (/home)... Continua ->

26 Comentarios

Write Comentarios
Anónimo
AUTHOR
12 de mayo de 2010, 14:39 delete

Hola!! gracias por el aporte!!! corre de maravilla!!! solo que tengo una duda!! intento poner un boton pero no me lo muestra por encima de la etiqueta que contiene la imagen de fondo! como podemos hacerle?? dejo mi mail: skateluis27@hot... saludos

Responder
avatar
_CarlitoX_
AUTHOR
13 de mayo de 2010, 10:26 delete

Hola, bueno, supongo que lo que haces es crear un nuevo botón y agregarlo al panel, esto no te funcionara, recuerda que estamos agregando un label y colocandolo como imagen de fondo, así que si quieres que algo se muestre por encima del label debes agregarlo a la etiqueta y no al panel, creamos el botón, luego lo agregamos a la etiqueta, siguiendo el código anterior seria así:

FONDO.add(MiBoton);

Suerte...

Responder
avatar
andres
AUTHOR
11 de julio de 2010, 23:17 delete

ooooooooooooooooooooh compadre buenisimo gracias
me diste la respuesta precisa con lo del boton tambien...muy agradecido por tu aporte, se los voy a recomendar a mis compañeros tu web.

Responder
avatar
_CarlitoX_
AUTHOR
12 de julio de 2010, 8:33 delete

De nada, cualquier duda que tengas puedes venir y preguntar cuando quieras, gracias por la recomendacion....

Responder
avatar
reinaldo01
AUTHOR
17 de agosto de 2010, 23:53 delete

exelente pagina mi hermano esta chida y ese ejercicio corre al pelo jeje te felicito

Responder
avatar
Johanna
AUTHOR
23 de agosto de 2010, 19:19 delete Este comentario ha sido eliminado por el autor.
avatar
Johanna
AUTHOR
23 de agosto de 2010, 19:21 delete

Hola que tal, estoy realizando un proyecto y necesito saber algo:

Estoy utilizando gridLayout, y sobre cada celda pongo botones(para hacerlo simular como un tablero).
Pero quisiera poner imagenes, sobre estos botones; ejemplo una imagen sobre 3 botones y luego necesito que al darle clic se mueva la imagen a una nueva posicion:(
ALguien me puede ayudar

Responder
avatar
_CarlitoX_
AUTHOR
23 de agosto de 2010, 20:13 delete

Mmmmm.... no te entiendo mucho pero eso es mucho código =)... si estas haciendo un "Layout" entonces ya debes estar algo avanzada en esto y debes conocer NetBeans, si lo usas entonces todo es más fácil, pero dime algo, lo que quieres es que al darle click un label, celda o botón cambie de imagen? o quieres que la imagen del botón donde se hizo el click cambie?

Responder
avatar
Johanna
AUTHOR
24 de agosto de 2010, 20:11 delete

Hola Carlos.... Estoy realizando un proyecto final de una materia y estoy usando netbeans.
El proyecto en si, es una batalla de barcos. Mi profesora quiere una especie de tablero, en donde se pongan barcos cuyo tamaño sea dado por celdas(3 celdas hacen un yate, 2 celdas hacen un bote, etc). Tengo q poner inicialmente todos los barcos aleatoriamente en cualquier posicion dentro del tablero, una vez q los barcos estan puestos en el tablero tengo que arrastarlos a una nueva posicion(además tngo q poner una imagen del tamaño del barco sobre las celdas donde esta ubicado el barco).
He puesto un panel con gridLayout y separados por botones. Pero no se como poner la imagen q represente a un barco sobre los botones y como lo arrastro.
Me podrías ayudar o indicar alguna página en donde expliquen acerca de esto.
Está bien usar gridLayout y botones ???????
Please Contesta :)

Responder
avatar
_CarlitoX_
AUTHOR
24 de agosto de 2010, 20:48 delete

personalmente no te recomiendo usar botones y mucho menos celdas para esto, es válido claro, pero lo mejor es hacerlo con imagenes y divisiones de pantalla de frame, este juego es super famoso pero hacerlo no es tan simple como lo describes, puedes verlo completo en este post de taringa: batalla naval...
De cualquier forma estudia el código y cualquier inquietud que tengas respecto al mismo yo te ayudo con lo que pueda.... prueba, saludos :)

Responder
avatar
Anónimo
AUTHOR
25 de noviembre de 2010, 20:34 delete

yo no puedo aserlo ayudenme plizzzz

Responder
avatar
25 de noviembre de 2010, 21:24 delete

Que no puedes hacer? comenta mejor tu problema para ver como puedo ayudarte, saludos

Responder
avatar
Anónimo
AUTHOR
23 de febrero de 2012, 18:48 delete

mi duda es que cuando coloco el codigo me
marka error en Image me podrias ayudar?:$

Responder
avatar
23 de febrero de 2012, 19:30 delete

¿Que error te marca? Pega aquí la línea del error para darle solución... Pero lo mas probable es que se trate de que no puede encontrar la ruta de la imagen o que no este bien definida la variable.

Responder
avatar
Erick
AUTHOR
23 de abril de 2012, 19:31 delete

Amigo, interesante tu codigo, la verdad, estoy tratando de hacer un PACMAN pero estoy quieto en el menu, porque los botones aparecen detras de mi fondo.
Te dejo mi codigo a ver si me puedes ayudar a que los botones aparezcan encima del gif. Muchas gracias de antemano.

Esta es la clase que dibuja el tablero del menu, basta crear un main y crear un objeto de tipo MenuTablero para que se cree. Pero eso tu ya lo sabes :D


import java.awt.*;
import java.awt.event.*;
import java.awt.image.*;
import java.io.*;
import java.util.*;
import javax.imageio.ImageIO;
import javax.sound.sampled.*;
import javax.swing.*;
import javax.swing.border.*;

public class MenuOpciones extends JFrame implements ActionListener{

private Clip sonido;

private GridBagLayout organizador = new GridBagLayout();
private GridBagConstraints espacios = new GridBagConstraints();

private ImageIcon imagenTablero = new ImageIcon("Imagenes/Tableros.jpg");
private ImageIcon imagenPuntajes = new ImageIcon("Imagenes/Puntajes Altos.jpg");
private ImageIcon imagenCreditos = new ImageIcon("Imagenes/Creditos.jpg");
private Image imagenFondo = new ImageIcon("Imagenes/pacman.gif").getImage();
private Image imagenIcono = new ImageIcon("Imagenes/Pacman Icono.jpg").getImage();

private JButton boton1 = new JButton(imagenTablero);
private JButton boton2 = new JButton(imagenPuntajes);
private JButton boton3 = new JButton(imagenCreditos);

File sonidoInicio = new File("Sonidos/Pacman.wav");

public MenuOpciones(){

setTitle("PACMAN");
setBounds(100, 100, 1024, 720);
//setExtendedState(MAXIMIZED_BOTH);
getContentPane().setLayout(organizador);
setIconImage(imagenIcono);
setVisible(true);
setDefaultCloseOperation(EXIT_ON_CLOSE);

espacios.insets = new Insets(150,0,0,0);
espacios.gridx = 0;
espacios.gridy = 0;
espacios.gridwidth = 0;
espacios.gridheight = 0;
boton1.setToolTipText("Ingresa al modo de opcion de tableros");
boton1.addActionListener(this);
getContentPane().add(boton1, espacios);
espacios.gridx = 0;
espacios.gridy = 1;
espacios.gridwidth = 1;
espacios.gridheight = 1;
boton2.setToolTipText("Mira las altas puntuaciones y trata de romperlas");
boton2.addActionListener(this);
getContentPane().add(boton2, espacios);
espacios.gridx = 0;
espacios.gridy = 2;
espacios.gridwidth = 0;
espacios.gridheight = 0;
boton3.setToolTipText("Creditos de los creadores");
boton3.addActionListener(this);
getContentPane().add(boton3, espacios);

try {

sonido = AudioSystem.getClip(); // Se obtiene un Clip de sonido
sonido.open(AudioSystem.getAudioInputStream(sonidoInicio)); // Se carga con un fichero wav
sonido.start(); // Comienza la reproducción
sonido.loop(Clip.LOOP_CONTINUOUSLY);
}catch(Exception e){}
}

public void paint(Graphics g){
g.drawImage(imagenFondo, 0, 0, this.getWidth(), this.getHeight(), this);
setOpacity(0);
super.paint(g);
}

public void actionPerformed(ActionEvent clickDerecho) {
Object click = clickDerecho.getSource();
if(click==boton1){
setVisible(false);
sonido.close();
Tablero elegirTablero = new MenuTableros();
}
if(click==boton2){
Tablero altasPuntuaciones = new PuntajesJugadores();
}
if(click==boton3){
Tablero credito = new Creditos();
}
}
}

Responder
avatar
2 de mayo de 2012, 14:38 delete

Disculpa la tardanza en responder, hay muchas inconsistencias en el código, empezando por esta:

Tablero elegirTablero = new MenuTableros();

Según el código dice que se creara una variable "elegirTablero" desde la clase "MenuTableros" del tipo "Tablero", pero la clase "MenuTableros" no existe por ninguna parte del código, a lo mejor lo tendras dentro de un paquete y lo pones todo en un mismo lugar (supongo esto porque tampoco veo el método principal o "main"), pero en fin....

A simple vista parece ser que el problema es que
lo estas cargando como imagen (ImageIcon imagenTabler) cuando deberias cargarlo como label o "Image" sola, ya que se trata de un fondo fijo, prueba cambiándolo por lo siguiente:

JLabel imagenTablero = new JLabel(new ImageIcon("Imagenes/Tableros.jpg"));

Y agrégalo antes de mostrar todo, justo después del último add:

this.add(imagenTablero);

Responder
avatar
Anónimo
AUTHOR
28 de mayo de 2012, 16:53 delete

A mi me pega la Imagen como en el centro pero no se Extiende con la ventana, es decir no parece una imagen de "fondo" aunque tu ejemplo lo corre bien sin problemas .

Responder
avatar
30 de mayo de 2012, 19:44 delete

Es que este ejemplo no lo estira, sino que centra la imagen en el panel... Para hacer lo que quieres necesitas pintar de la siguiente forma:

public void paint(Graphics g){
g.drawImagen(tuimagen,1,1,ANCHO,ALTO,this);
}

Con esto lo estiras pasando la variable imageicon al método, cualquier cosa me dices si funciono... Saludos!!

Responder
avatar
Ricardo FN
AUTHOR
9 de agosto de 2012, 8:49 delete

necesito ayuda buenos dias en java escritorio quiero poner un label el cual cargara imagenes, lo que quiero es tener un botton y las vaya pasando ?? como hago eso... gracias... saludos

Responder
avatar
9 de agosto de 2012, 9:12 delete

Lo que se me ocurre de momentos es que te crees un panel junto con la función del cambio que esta en "esta entrada" (http://carlitoxenlaweb.blogspot.com/2011/02/imagen-de-fondo-java.html), luego le envías por parámetro el Panel que contiene el fondo junto con el nombre del archivo y haces un "repaint" para redibujar el panel. Fíjate sobre todo en el método "cargarImagen"... Prueba y me comentas, saludos!!

Responder
avatar
Ricardo FN
AUTHOR
9 de agosto de 2012, 9:32 delete

gracias por responder y lo que quiero es lo siguiente
jLabel1.setIcon(new javax.swing.ImageIcon(getClass().getResource("/imagenes/a.jpeg")));
con esa linea de codigo cargo la imagen en el jlabel ,tengo una carpta que tiene 7 imagenes ,ahora quiero crear un boton que me vaya pasando y mostrando las imagenes en el jlabel...
?????

Responder
avatar
9 de agosto de 2012, 10:07 delete

Ya veo, entonces lo que necesitas es refrescar la imagen que has cargado, para eso te recomiendo no hacerlo directo, sino como esta al comienzo de la entrada:

ImageIcon ICONO1 = new ImageIcon("a.jpeg"),
ICONO2 = new ImageIcon("b.jpeg"),
ICONO3 = new ImageIcon("c.jpeg"),
ICONO4 = new ImageIcon("d.jpeg");

Luego para aplicar el icono que quieres utilizar lo haces como normalmente se haría:

JLabel etiqueta = new JLabel(ICONO_X); //'_X' representa el número del icono

Para cambiarlo solo tienes que aplicar el icono en el listener o evento y redibujar:

etiqueta.setIcon(ICONO_X);
etiqueta.repaint();
etiqueta.validate();

Responder
avatar
Anónimo
AUTHOR
22 de noviembre de 2012, 13:28 delete

Hola amigo necesito ayuda!!! a mi me aparece la imagen pero me cubre los botones que tengo, es decir, que la imagen impide que se vizualicen los botones!!??

Te dejo el codigo para que si puedes me digas que tengo que hacerle!!!

Aahh lo que hago es que le agrego un Jpanl a un Jframe!!!


<<>>

package añadiendiimagen;

import java.awt.BorderLayout;
import java.awt.Container;
import java.awt.EventQueue;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import javax.swing.GroupLayout;
import javax.swing.GroupLayout.Alignment;
import javax.swing.JButton;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;



public class Jframe extends JFrame {

private static final long serialVersionUID = 1L;
private JPanel jcontentPane = null;
public static void main(String[] Jframe) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
Jframe frame = new Jframe();
frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
public Jframe() {
super();

JButton btnHola = new JButton("Hola");
btnHola.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent arg0) {
}
});
GroupLayout groupLayout = new GroupLayout(getContentPane());
groupLayout.setHorizontalGroup(
groupLayout.createParallelGroup(Alignment.LEADING)
.addGroup(Alignment.TRAILING, groupLayout.createSequentialGroup()
.addContainerGap(84, Short.MAX_VALUE)
.addComponent(btnHola, GroupLayout.PREFERRED_SIZE, 119, GroupLayout.PREFERRED_SIZE)
.addGap(81))
);
groupLayout.setVerticalGroup(
groupLayout.createParallelGroup(Alignment.LEADING)
.addGroup(Alignment.TRAILING, groupLayout.createSequentialGroup()
.addContainerGap(73, Short.MAX_VALUE)
.addComponent(btnHola, GroupLayout.PREFERRED_SIZE, 55, GroupLayout.PREFERRED_SIZE)
.addGap(34))
);
getContentPane().setLayout(groupLayout);
initialize();

}


private void initialize() {
this.setSize(1000, 700);
this.setContentPane(getJContentPane() );
this.setTitle("JFrame");

}


private Frame getJContentPane() {
if (jcontentPane == null){
jcontentPane = new Frame ("1.gif");
jcontentPane.setLayout(new BorderLayout());

}
return (Frame) jcontentPane;
}
}



<<>>

package añadiendiimagen;

import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.GridBagLayout;

import javax.swing.ImageIcon;
import javax.swing.JPanel;

public class Frame extends JPanel {

ImageIcon imagen;
private static final long serialVersionUID = 1L;


public Frame(String nombre) {
super();
initialize();
imagen = new ImageIcon(getClass() .getResource(nombre));
setSize (imagen.getIconWidth(), imagen.getIconHeight());
}

protected void paintComponent (Graphics g){
Dimension d = getSize();
g.drawImage(imagen.getImage(),450, 40, d.width=500, d.height=600, null);
this.setOpaque(false);
super.paintComponent(g);
}


private void initialize() {
this.setSize(300, 200);
this.setLayout(new GridBagLayout() );

}


}

Responder
avatar
22 de noviembre de 2012, 13:47 delete

Esto es para agregar un label que hará de fondo, es solo para modo de ejemplo y paneles simples como un "acerca de" o algo por el estilo.... Por eso cuando utilizas un layout, el fondo se va para otro lado, se desfaza, se sobrepone o simplemente no se ve, por tu código solo es cuestion de que veas estas entradas y cambies una que otra línea:

http://carlitoxenlaweb.blogspot.com/2010/02/imagen-de-fondo-en-java-cont.html
http://carlitoxenlaweb.blogspot.com/2011/02/imagen-de-fondo-java.html

En ellas explico como hacerlo sin usar JLabel.... Saludos!!!

Responder
avatar

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión EmoticonEmoticon