Self adjusting background image

Check out this background image on the Palm site.
http://www.palm.com/us/index.html
It is cool how it shrinks and stretches to fill the back. Any ideas on how to do it?
Steven Houtzager
intuitionusa.com

The image is handled with CSS...
#bg-blur{width:100%;height:800px;position:absolute;top:0;left:0;z-index:0;opacity:0;filter:alpha(opacity=0);
It is always 100% wide to fill the browser window and 800px tall.

Similar Messages

Dynamically adjust background image?

Alright, here's one i think is a challenge:
I have a background image loaded in a div via css. I use this
div and background across multiple pages. Some pages have more info
than others. Is there a way to dynamically scale the div AND the
background? I know I can do the div, but it cuts the background. I
want to be able to adjust both the background image and the div
according to how many lines are in the page.

Bleh....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Nancy O" <[email protected]> wrote in message
news:g0t6tl$kdt$[email protected]..
> Without seeing your site, I'm guessing you are trying to
"fit" content
> precisely over a large, absolutely positioned background
image or
> photograph. Am I right?
>
>
http://alt-web.com/Backgrounds.shtml
>
>
> --Nancy O.
> Alt-Web Design & Publishing
> www.alt-web.com
>
>
>
>
> "Mack879w" <[email protected]> wrote in
message
> news:g0t2k6$ga7$[email protected]..
>> Alright, here's one i think is a challenge:
>>
>> I have a background image loaded in a div via css. I
use this div and
>> background across multiple pages. Some pages have
more info than others.
> Is
>> there a way to dynamically scale the div AND the
background? I know I
>> can
> do
>> the div, but it cuts the background. I want to be
able to adjust both
>> the
>> background image and the div according to how many
lines are in the page.
>>
>
>

How do I adjust background image, it is too big

Hi I am very new to DW. I am completing a portfolio project that is due very soon. I just realized that the background image that I created in Photoshop is extremely large so when a user scrolls to the right there is empty screen. I would like to have nothing to the right or not even an option to scroll right. hope that makes sense. Is there a way to adjust so that it will only fill the screen instead of going over more? I put in a screenshot. Thanks for your help.

Ben I put that code in but it cleared the background off totally, what did I do wrong? Thank you

Adjusting background image?

I'm pretty new to the creating of homepages, so this might be
a rather basic problem, but anyhow here's my question: I've created
my own background image in Photoshop and imported it to Dreamweaver
as a background image with the script:
background-image:url(front2.jpg);
background-repeat:no-repeat;
The oroblem I have now however is that the image seem much
too big in size for the created webpage, displaying only a corner
of the original image. How do I adjust this?
Thank you very much in advance for any tip you can give me!
/ Sireli

Hi,
try:
background-position= center top;
"Sireli" <[email protected]> escribió
en el mensaje de noticias
news:fs2hoq$fok$[email protected]..
> I'm pretty new to the creating of homepages, so this
might be a rather
> basic
> problem, but anyhow here's my question: I've created my
own background
> image in
> Photoshop and imported it to Dreamweaver as a background
image with the
> script:
>
> background-image:url(front2.jpg);
> background-repeat:no-repeat;
>
> The oroblem I have now however is that the image seem
much too big in size
> for
> the created webpage, displaying only a corner of the
original image. How
> do I
> adjust this?
>
> Thank you very much in advance for any tip you can give
me!
> / Sireli
>

How is it possible to adjust the background images and the text in Mail?

How is it possible to adjust the background images and the text in Mail?

Here's the solution I used to solve the same problem. If you're not comfortable editing the source files, this might be more than you want to take on--but I've done it to several files with no ill effects. You can follow the instructions on this page and the referenced original post from (he includes a link on the page). Good luck! He's got some great tips on some of his other pages.
http://photo.rwboyer.com/2010/03/15/aperture-3-book-theme-trick/
A warning about editing the Master pages--it only edits them in that book--it doesn't update the theme. So if you go to create another book with those same layouts, you'll have to duplicate the book and replace all the images. An alternative would be to create a "clean" book with no photos in it and then just use that as a starting point each time.

Creating adjustable-size rounded box background image for Moomenu

I have a Moomenu with a horizontally repeating background image:
#moo_sk_menu a:hover{
color: #ffffff;
background-image: url(../images/moomenu1_png32.png);
background-repeat: repeat-x;
However, I would like to create a menu with a rounded box image on mouseover. The above strategy won't work, however, as it is simply a 1 px wide rectangle repeating on the x axis. A rounded box as background won't adjust for the different widths of the menu items. There must be some workaround using three images and nested divs; however I am not sure how to proceed...

/**CSS ROUNDED CORNERS for Mozilla, Webkit, Linux, Opera, IE9**/
#Your-Div-Name {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Trouble: absolute center background image to adjust when window size adjusts

Hello DW experts!
I would really appreciate some help in getting my background image to be perfectly centered, and then adjust to always be in the center when the window size is adjusted. Here is an example of what I am looking for:
[http://www.wpdfd.com/editorial/thebox/deadcentre4.html | http://www.wpdfd.com/editorial/thebox/deadcentre4.html]   I have searched and found a lot of resources online, and I have tried there different options (i.e. background: cover, absolute, z index etc.). Here is a link to the homepage, goal is for the words Apex to show up in the center. It does not only if viewed on a large monitor. Goal is if the monitor is smaller or the person adjusts the window for the word Apex to adjust and remain as centered as possible. There will be content covering it on some pages so it does not have to be perfect.
[http://sellurownhouse.com/ | http://sellurownhouse.com/]    Thanks in advance for any help!
body {
background-color: #000;
margin: auto;
background-image: url(images/wallpaperx.jpg);

body {
     width: 980px; /**adjust as req'd**/
     margin: 0 auto; /** with width, this is centered on screen**/
     background: #000 url(your_background.jpg) no-repeat center center;
Nancy O.

How do I adjust my background image to fit my browser

I have a background image that it 1600 x 1200 and when I try to view in browser, almost half the image gets cut off. How do I adjust the size to fit my browser or even adjust it to fit any browser?

1600 x 1200 is a huge image by web standards. Images don't resize to fill viewport without workarounds (tricks). And while Martin's solution works in some browsers, it's not bulletproof. Downsides may outweigh advantages.
For best cross browser results (including older IE), establish a fixed page width of say 1000px to fit on average displays. Center your page layout.
Open your image in Photoshop or Fireworks and resize it to 1000 x 750. Your image won't fill the viewport but it will fit your page width.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Using Background Image In Dreamweaver

Good evening.
I'm using a non-repeating, centered background image in Dreamweaver. But i'd like it to self-adjust its size depending upon what monitor size its viewing it. Can someone provide some coding for help with this???
Here's where i'm at thus far..
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="welcome10.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body style="background-color: #000; background-position: center top; background-repeat: no-repeat; background-image: url(images/girls-bg9.jpg); background-attachment: fixed;">
<div id="wrapper">
          <div id="container">
    </div>
</div>
</body>
</html>
css -
@charset "utf-8";
/* CSS Document */
#wrapper{
          width: auto;
          height: 1600px;
#container {
          background-color: #FFF;
          height: 200px;
          margin-right: 100px;
          margin-left: 100px;
          margin-top: 100px;
thanks guys, and gals...

Background-size would do the trick, but keep in mind, most CSS3 does not function in IE9 (though this will), and won't at all in IE8 and down. If you need it to work in those browsers, the best way to do it would be with javascript. I've used the script available on this site with some success...
http://louisremi.github.io/jquery.backgroundSize.js/demo/

Spry Menu Background image not working in IE

I have created a website using Dreamweaver CS5 and having trouble with my Spry bar in internet explorer. It looks great in chrome, firefox, etc, but in IE there is a white background instead of my background image and the submenus have moved WAY right.. can someone help me!
SpryMenuBarHorizontal.CSS is below:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 800px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 160px;
float: left;
background-image: url(file:///E|/MAIN_website/images/menu_background.jpg);
ul.MenuBarHorizontal li a{
color:#FFF;
ul.MenuBarHorizontal li li{
background-image: url(../images/menu_background1.jpg);
ul.MenuBarHorizontal li li a{
color:#000;
ul.MenuBarHorizontal li li li{
background-image: url(file:///E|/MAIN_website/images/index_06.jpg);
ul.MenuBarHorizontal li li li a{
color:#FFF;
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
color:#33CCFF;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 160px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
font-family: Cambria, Arial, sans-serif;
font-size: 14px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
text-decoration: underline;
/* [disabled]background-image: url(file:///E|/MAIN_website/images/menu_background.jpg); */
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Because I can't see your site and code in context, I will make a guess that this style is throwing off your alignment:
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 160px;
float: left;
background-image: url(file:///E|/MAIN_website/images/menu_background.jpg);
Remove the text-align:center; from the above style.
Instead of centering your list element (li), center the link text (a) itself:
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-align: center;
text-decoration: none;
font-family: Cambria, Arial, sans-serif;
font-size: 14px;
If you don't want the submenu text to be centered, do this immediately after the previous style:
ul.MenuBarHorizontal ul a {text-align: left;}
The sub-submenus are also set up by default to be jogged a bit to the right. You can adjust this style:
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
that causes sub-submenus to fly out to the right of the submenus to which they attach.
Submenus themselves (not the sub-submenus) should fall directly under the top menu item by default, once you remove the text-align: center; on the li item (above).
Beth

Problem in setting background Image to TabedPane.

Hi Pals,
I created a JFrame which consist of some components. The structure of the added components are given below.
1) I added a JPanel (MainPanel) with background image in a JFrame.
2) I added a JTabbedPane with 7 tabs in the previous JPanel (MainPanel).
3) Each tabs in the JTabbedPane having JPanel with Background Image.
This is my Frame Structure. but i haven't problem to run in JDK1.6,1.5. It is working perfect. But when am run in lower version like 1.3 or 1.4. The design is looking bad. The JTabbedPane overlap the (MainPanel). The background image of the (MainPanel) was hided. I set setOpaque(false) for the JTabbedPane. But it also not working. How can i solve this problem.
By,
Mohan

Your problems appear to stem from your choice of layout manager(s). To get better help sooner, post a [_Short, Self Contained, Compilable and Executable, Example Program (SSCCE)_|http://mindprod.com/jgloss/sscce.html] that clearly demonstrates your problem.
To post code, use the code tags -- [code]Your Code[/code] will display asYour CodeOr use the code button above the editing area and paste your code between the {code}{code} tags it generates.
db

How can I use a refrence background image ?

HI,
I need to register align horizontally and vertically) about 100 images to the first. I don't want to stack or merge them. An ideal way to accomplish this would be to be able to set the first image as a background reference image for all images in the group. There would be left/right buttons so I could advance through the stack, a slider to adjust the visibility of the foreground image, and up/down & right/left arrows so I could move the upper image a pixel at a time in any direction. In this case I don't need to rotate the image, but this would also be something a person might want to control. Then I would move through the group of images, stopping on each one to align the image to the first. One at a time, or after I am done, it would save all the aligned images to a new filename and folder, without changing the transparency of the image or in any way using the background reference image. Without rotating the images, every pixel in the new image would be the same as in the original, except moved. I would start by resizing the canvas of all the images so they have a border area. This way I can move the image around and not lose any of it.
Of course I could put the reference image in the background layer and the image to be adjusted above it on another layer. Then i can use the background as a reference by making the upper image somewhat transparent. Finially I could delete the background layer and save the image with just the adjusted layer. But this would be tedius with 100 images, even worse if there were 1000..
Is there a reference background image capability in Photoshop CC ? Is there a better or different way to do this ? Or can Bridge do it ?

Perhaps I need to explain my specific application. I have 120 images that are part of a time lapse sequence. The camera is photographing a meteor shower. I was able to capture a meteor which left a persistent trail that lasted about 5 minutes. Because the camera is on a tripod, the stars are constantly moving and in fact moved quite a bit during the 5 minutes the trail was visible. These images are of much higher resulution than the 1080 video I am producing. I have used premier to track the spot in the images and show the meteor and trail as a video close up that runs at about 15% speed. because the exposures were 30 seconds ;long, every 33 seconds, the sky has visibly moved from image to image. because I use only a few keyframes Premier tracks the spot smoothly. But since the pictures are each moved, not moving, the stars in the final video move back and forth with each image. they never go anywhere, but this movement is distracting and annoying. Theoretically I could eliminate this movement by having a different key for each frame. But the better way is to prepare the images so they are all aligned. Then there will be no movement at all.
You have seen this effect in documentaries. Here's a hypothetical situation. Someone has handheld video of an important event happening. because of the situation and the handheld camera, the picture moves around like crazy. To be able to view the event clearly as part of an investigation, each frame is aligned to the first so the subject doesn't move at all, while the image frame moves all around. I have seen this many times. Now I need to do it.
I have 120 pictures which all must be aligned so the stars in the picture do not move. i need to see a refrence image through the image to be adjusted, so I can move the image to be adjusted until its stars are perfectly aligned with stars in the refrence image. Of course this is like stacking, which is used to reduce noise and increase detail. but I don't want to stack the images, just adjust them horizontally and vertically, and then save them in their adjusted state.

How can I have a background image for reference ?

HI,
I need to register align horizontally and vertically) about 100 images to the first. I don't want to stack or merge them. An ideal way to accomplish this would be to be able to set the first image as a background reference image for all images in the group. There would be left/right buttons so I could advance through the stack, a slider to adjust the visibility of the foreground image, and up/down & right/left arrows so I could move the upper image a pixel at a time in any direction. In this case I don't need to rotate the image, but this would also be something a person might want to control. Then I would move through the group of images, stopping on each one to align the image to the first. One at a time, or after I am done, it would save all the aligned images to a new filename and folder, without changing the transparency of the image or in any way using the background reference image. Without rotating the images, every pixel in the new image would be the same as in the original, except moved. I would start by resizing the canvas of all the images so they have a border area. This way I can move the image around and not lose any of it.
Of course I could put the reference image in the background layer and the image to be adjusted above it on another layer. Then i can use the background as a reference by making the upper image somewhat transparent. Finially I could delete the background layer and save the image with just the adjusted layer. But this would be tedius with 100 images, even worse if there were 1000..
Is there a reference background image capability in Photoshop CC ? Is there a better or different way to do this ? Or can Bridge do it ?

When I first posted this I had selected Photoshop as the community. After it had posted I saw it had changed and again changed it back to Photoshop. it again reset it to Premier Pro. I don't know why. Also, I had selected Refrence image as a tag and that keeps dissappearing. Even worse, there are no replies. What's the deal ?

Problem placing buttons on top of a background image

My knowledge of Java isn't the greatest and I am currently having problems placing buttons on top of a background image within a JApplet (this is also my first encounter with Applets).
I'm using a Card Layout in order to display a series of different screens upon request.
The first card is used as a Splash Screen which is displayed for 5 seconds before changing to the Main Menu card.
When the Main Menu card is called the background image is not shown but the button is.
While the Applet is running no errors are shown in the console.
Full source code can be seen below;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import java.net.*;
// First extend JApplet
public class WOT extends JApplet {
     //--------------- Variables are declared here -----------------
     private CardLayout contentCardLayout = new CardLayout(); // declare CardLayout
     private Container contentContain;     // declare content Container
     private JPanel contentCard, splashScreen, mainMenu, menuImage; // declare content Panels
     private JLabel splash, menu, map; // declare image labels
     private ImageIcon mapBtn; // declare ImageIcons
     private JButton mapOption; // declare option Buttons
     private Timer timer; // declare Timer
     private ActionListener actionListener, mapOptionListener; // declare ActionListener
//--------------- Initialise Applet -----------------
public void init() {
     //--------------- Set-up Card Layout -----------------
     contentCard = new JPanel(contentCardLayout); // assign card panels to CardLayout
     //--------------- Splash Screen -----------------
     splashScreen = new JPanel();
     splash = new JLabel(new ImageIcon(getClass().getResource("img/bg.gif")));
     splashScreen.add(splash);
     splashScreen.setSize(600,800);
     splashScreen.setLocation(0,0);
//--------------- "View Map" Option Button -----------------
     mapBtn = new ImageIcon(getClass().getResource("img/map.gif"));
     mapOption = new JButton(mapBtn);
     mapOption.setBorder(null);
     mapOption.setContentAreaFilled(false);
     mapOption.setSize(150,66);
     mapOption.setLocation(150,450);
     mapOption.setOpaque(false);
     mapOption.setVisible(true);
//--------------- Main Menu Screen -----------------
     //menuImage = new JPanel(null);
     //menuImage.add(mainMenu);
     //menuImage.setLocation(0,0);
     mainMenu = new JPanel(null);
     menu = new JLabel(new ImageIcon(getClass().getResource("img/menu.gif")));
     menu.setLocation(0,0);
     mainMenu.add(menu);
     //mainMenu.setBackground(Color.WHITE);
     mainMenu.setLocation(0,0);
     mainMenu.setOpaque(false);
     //mainMenu.setSize(150,66);
     mainMenu.add(mapOption);
     //--------------- Map Image Screen -----------------
     map = new JLabel(new ImageIcon(getClass().getResource("img/map.gif")));
     //--------------- Add Cards to CardLayout Panel -----------------
    contentCard.add(splashScreen, "Splash Screen");
     contentCard.add(mainMenu, "Main Menu");
     contentCard.add(map, "Map Image");
//--------------- Set-up container -----------------
      contentContain = getContentPane(); // set container as content pane
      contentContain.setBackground(Color.WHITE); // set container background colour
       contentContain.setLocation(0,0);
       contentContain.setSize(600,800);
      contentContain.setLayout(new FlowLayout()); // set container layout
       contentContain.add(contentCard); // cards added
       //--------------- Timer Action Listener -----------------
       actionListener = new ActionListener()
                public void actionPerformed(ActionEvent actionEvent)
                         //--------------- Show Main Menu Card -----------------
                         contentCardLayout.show(contentCard, "Main Menu");
     //--------------- Map Option Button Action Listener -----------------
       mapOptionListener = new ActionListener()
                public void actionPerformed(ActionEvent actionEvent)
                         //--------------- Show Main Menu Card -----------------
                         contentCardLayout.show(contentCard, "Map Image");
     //--------------- Timer -----------------
     timer = new Timer(5000, actionListener);
     timer.start();
     timer.setRepeats(false);
}Any help would be much appreciated!
Edited by: bex1984 on May 18, 2008 6:31 AM

1) When posting here, please use fewer comments. The comments that you have don't help folks who know Java read and understand your program and in fact hinder this ability, which makes it less likely that someone will in fact read your code and help you -- something you definitely don't want to have happen! Instead, strive to make your variable and method names as logical and self-commenting as possible, and use comments judiciously and a bit more sparingly.
2) Try to use more methods and even classes to "divide and conquer".
3) To create a panel with a background image that can hold buttons and such, you should create an object that overrides JPanel and has a paintComponent override method within it that draws your image using the graphics object's drawImage(...) method
For instance:
an image jpanel:
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.net.URISyntaxException;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.JButton;
import javax.swing.JPanel;
public class BackgroundImage
    // **** this will have to be changed for your program:
    private static final String IMAGE_PATH = "../../m02/a/images/Forest.jpg";
    private BufferedImage myImage = null;
    private JPanel imagePanel = new JPanel()
        @Override
        protected void paintComponent(Graphics g)
        {   // *** here is where I draw my image
            super.paintComponent(g); // **** don't forget this!
            if (myImage != null)
                g.drawImage(myImage, 0, 0, this);
    public BackgroundImage()
        imagePanel.setPreferredSize(new Dimension(600, 450));
        imagePanel.add(new JButton("Foobars Rule!"));
        try
            myImage = createImage(IMAGE_PATH);
        catch (IOException e)
            e.printStackTrace();
        catch (URISyntaxException e)
            e.printStackTrace();
    private BufferedImage createImage(String path) throws IOException,
            URISyntaxException
        URL imageURL = getClass().getResource(path);
        if (imageURL != null)
            return ImageIO.read(new File(imageURL.toURI()));
        else
            return null;
    public JPanel getImagePanel()
        return imagePanel;
}and an applet that uses it:
import java.lang.reflect.InvocationTargetException;
import javax.swing.JApplet;
import javax.swing.SwingUtilities;
public class BackgrndImageApplet extends JApplet
    @Override
    public void init()
        try
            SwingUtilities.invokeAndWait(new Runnable()
                @Override
                public void run()
                    getContentPane().add(new BackgroundImage().getImagePanel());
        catch (InterruptedException e)
            e.printStackTrace();
        catch (InvocationTargetException e)
            e.printStackTrace();
}

Creating business cards in Pages with background image

I am trying to use the Pages business card template and background image function of pages to create a business card that has an image on every business card on the sheet. I can't seem to find out how to do that. Can anyone help?
Thanks,
Jim

Here is the basic method of having white text on a colored background: Insert a shape. While selected go to the Graphic Inspector and select a Fill color. Re-proportion the shape as needed. Insert a text box (or boxes) and type your text. Drag it (them) over the shape and change the color of the text to white (or any other color you desire). Select all and group. Duplicate as needed. Apply this procedure to your business cards or anywhere else.
Another method for applying a colored background to a text box: select the text box and Fill it from the Graphics Inspector and adjust the Inset Margin in the Text Inspector.
Wal

Self adjusting background image

Similar Messages

Maybe you are looking for