Setting a jpanel as a background image

i have managed to load the image into a jpanel but now need to know how to set the jpanel as a background image, to allow my jbuttons and textfields to be seen over the top

that statement is unbeleivably true.
right, heres my two classes, the first class is where i created the image
import java.awt.*;
import java.awt.event.*;
import javax.swing.* ;
import java.io.*;
import javax.imageio.*;
public class EmailBackgroundImage extends JComponent
public void paint (Graphics g)
File bkgdimage = new File ("background.jpg");
Image imagebg = createImage ( 250,300 );
try {
imagebg = ImageIO.read(bkgdimage);
catch (IOException e)
g.drawImage(imagebg, 0, 0,null,null);
this next class is where i'm trying to make the background
youll notice remnants of my current attempt to create the background image.
in its current state it does compile
import java.awt.*;
import java.awt.event.*;
import javax.swing.* ;
import java.sql.*;
import java.util.*;
import java.awt.color.*;
public class emailFrontpage extends JFrame implements ActionListener
JLabel FirstNameLabel = new JLabel("First Name");
JLabel LastNameLabel = new JLabel("Last Name");
JLabel EmailLabel = new JLabel("Email Address");
JTextField FirstNameText = new JTextField( 10 );
JTextField LastNameText = new JTextField( 10 );
JTextField EmailAddressText = new JTextField( 20 );
JPanel panel1 = new JPanel();
JPanel panel2 = new JPanel();
JPanel panel3 = new JPanel();
JPanel panel4 = new JPanel();
JPanel panel5 = new JPanel();
JPanel image = new JPanel();
JButton Enterbutton = new JButton("Enter Details");
JButton Logon = new JButton("Log on");
EmailBackgroundImage myimage;
EmailEdit editEmp;
emailFrontpage()
getContentPane().setLayout( new BoxLayout( getContentPane(), BoxLayout.Y_AXIS ));
myimage = new EmailBackgroundImage();
image.add(myimage);
myimage.setSize(250,300);
image.setOpaque( false );
FirstNameLabel.setForeground(Color.WHITE);
LastNameLabel.setForeground(Color.WHITE);
EmailLabel.setForeground(Color.WHITE);
panel1.add(Logon);
panel2.add(FirstNameLabel); panel2.add(FirstNameText);
panel3.add(LastNameLabel); panel3.add(LastNameText);
panel4.add(EmailLabel); panel4.add(EmailAddressText);
panel5.add(Enterbutton);
getContentPane().add(image);
getContentPane().add(panel1);
getContentPane().add(panel2);
getContentPane().add(panel3);
getContentPane().add(panel4);
getContentPane().add(panel5);
// .setBackground( Color.black )
Enterbutton.addActionListener( this );
Logon.addActionListener( this );
Enterbutton.setActionCommand( "ENTERBUTTONPRESSED" );
Logon.setActionCommand( "LOGONBUTTONPRESSED" );
setDefaultCloseOperation( WindowConstants.EXIT_ON_CLOSE );
editEmp = new EmailEdit();
public void actionPerformed( ActionEvent evt)
if ( evt.getActionCommand().equals("LOGONBUTTONPRESSED") )
emailLogonpage emaillogon = new emailLogonpage();
emaillogon.setSize( 250, 300 );
emaillogon.setVisible( true );
emaillogon.setResizable(false);
setVisible(false);
else
String newFN = FirstNameText.getText();
String newLN = LastNameText.getText();
String newEA = EmailAddressText.getText();
editEmp.addNewEmail(newFN, newLN, newEA);
setVisible(false);
emailFrontpage emailfront = new emailFrontpage();
emailfront.setSize( 250, 300 );
emailfront.setVisible( true );
emailfront.setResizable(false);
public static void main ( String[] args )
emailFrontpage emailfront = new emailFrontpage();
emailfront.setSize( 250, 300 );
emailfront.setVisible( true );
emailfront.setResizable(false);
}

Similar Messages

  • How do I set this up.. a background image in a flash drive as its opened

    Hi.. For a birthday present I want to give my friend 2 tracks and a folder..
    I want the background to be an image and the 2 files and the one folder to line up as shown in the pic attached..
    I have managed to make the flashdrive be an custom icon and so the files and a folder with pictures.
    When I go finder --> View --> show view options I get the small window 
    I then copy the image I want as background into the small background window, then it appears as shown..
    I align the folders as shown
    then I select the windows "always open in icon view" and "browse in icon view" 
    then I choose "use as defaults"
    so i get what i want: see picture a :
    I then eject properly and when I insert the drive back in.. the icons remain but I get picture b:
    What am I doing wrong?? Any ideas how to accomplish this? (so that picture a appears when the flash drive is inserted at any time?)
    Thank YOU!

    oops sorry accidenatlly typed solved.. I will try that option
    and no its not for my gf LOL

  • 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

  • Setting background image in JFrame

    Witam,
    Jak mozna ustawic tlo w postaci grafiki (png, jpg, ...) dla jFrame? Znalalem juz kilka sposobow ale one uzywaja jPanel, ktorego ja NIE moge uzyc ... niestety. Jesli nie ma takiej mozliwosci dla jFrame to moze tez byc dla jScrollPane, JComponent, Scene albo LayerWidget;)
    Hi,
    Is it possoble to use image as a background for jFrame? I know that it is possible to use jPanel and ser background image for jPanel, but in my project I cannot use it. Instead I can use jFrame, jScrollPane, Scene or LayerWidget.:)

    In the future, Swing related questions should be posted in the Swing forum.
    But there is already no need to post in the Swing forum because you already know the answer:
    I know that it is possible to use jPanel and ser background image for jPanel,
    If you need further help then you need to create a "Short, Self Contained, Compilable and Executable, Example Program (SSCCE)", that demonstrates the incorrect behaviour.
    http://homepage1.nifty.com/algafield/sscce.html
    Don't forget to use the "Code Formatting Tags", so the posted code retains its original formatting.
    http://forum.java.sun.com/help.jspa?sec=formatting

  • Setting background-image as editable in Fluid Grid Layout (Template file)

    Hi, Im very basic on Dreamweaver so bare with me,
    I am creating my first website and setting up my template file.
    I am struggling with making my background image editable in the template file,
    Alot of the awnsers point me into creating a new background style sheet which I have done.
    I have included :
    <link rel="stylesheet" href="../Background style sheet.css" type="text/css">
    into my <head> in the source code and now im pretty lost for what to do next... I want to link it to all my mobile, tablet and desktop #main divs and then be able to edit the background image for my different web pages;
    for example my home page is one background-image and then the other web pages all have other background images.
    Sorry if I am not asking the right questions, I am very new to coding
    Regards,
    Confused Graphic Design student.

    It's actually very easy to target the <body> of each page in an external stylesheet to change the background individually, just not with DW Templates.
    Normally, what I would do is give each page's <body> tag an id, for example, on an about.html page...
    <body id="about">
    Then in the css, you would give the #about id a background-image setting...
    #about {
         background-image:url(about_bg.jpg);
    Each page would have a similarly named id in the <body> and a corresponding #id in the css.
    Side Note: Stick to lower case, alpha numeric file names for all of your pages and images. Use underscores or hyphens instead of spaces for them too. Servers are CaSe SenSitIvE and a link to Index.html (capital i) will not go to a page named index.html (lowercase i). It will work on your local system, just not on the server because the server sees the case structure difference as two separate files.

  • Problems to add a background-image to the widget Spry MenuBar!

    With DreamweaverCS4 version 10.0 Build 4117, (italian language) I have tried to add a Spry MenuBar to the one website page.
    But the problem is that I haven't understood where add my property "background-image": url(../immagini/Menu_Button_01.gif).
    In the Application Page of Dreamweaver I have this screenshot:
    But in the Preview Window of InternetExplorer 7 I have this strange behavior:
    The "Menu_Button_01.gif" are a rounded square button made with PhotoshopCS4 and have a transparent background.
    In the IE7 MenuBar doesn't appears as expected, without the transparent background!
    1) How can I do to show my "Menu_Button_01.gif" image as transparent background in the MenuBar?
    2) What is the correct CSS Style Rule to apply the "background-image" property?
    (Example: "ul.MenuBarHorizontal li"? Or "ul.MenuBarHorizontal a"? )
    3) Should I also apply the property: "background-color:transparent"? Where? What is the specific CSS Style Rule?
    I have uploaded my little local WebSite to Rapidshare (100KB):
    http://rapidshare.com/files/370735082/Test_Spry.zip.html
    Please download it to inspect my problem.
    Please response me!
    Horsepower0171.

    For a starter, you should not put your background style rules in the following. The accompanying descriptions will tell you this.
    /* 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: left;
        cursor: pointer;
        width: 116px;
        float: left;
        background-image: url(../immagini/Menu_Button_01.gif);
        background-color: transparent;
    /* 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: 116px;
        position: absolute;
        left: -1000em;
        background-image: url(../immagini/Menu_Button_01.gif);
        background-color: transparent;
    Then when you apply style rules to
    /* 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: #333;
        text-decoration: none;
        background-image: url(../immagini/Menu_Button_01.gif);
        background-color: transparent;
    this will be overridden by the following rules. They replace your image with an arrow image.
    /* 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%;
    There are one of two solutions
    If you do not want and arrow, simply set background to none in the above four instances.
    If you do want an arrow, include a down arrow image in a second Menu_Button_01.gif image called Menu_Button_01_DownArrow.gif or similar as well as a third one for your right arrow image.
    I hope this helps.
    Ben

  • 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

  • Background images with spry "horizontal menu"

    hi again
    I am trying to work with the spry: "horizontal menu"
    I want to put some background images into the menu bar not into the submenu
    and that is the problem: the background images appears overall
    what can I do ?
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Unbenanntes Dokument</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    #container {
         margin-right: auto;
         margin-left: auto;
         width: 400px;
    -->
    </style>
    </head>
    <body>
    <div id="container">Raum für den Inhalt von  id "container"
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Element 1</a>  </li>
    <li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
        <ul>
          <li><a href="#" class="MenuBarHorizontal">heija</a>      </li>
          <li><a href="#">soso</a></li>
    </ul>
      </li>
      <li><a href="#">Element 4</a></li>
    </ul>
    <p>  </p>
    <p> </p>
    <p> </p>
    <p> </p>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>
    and css
    ul.MenuBarHorizontal
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 100%;
         cursor: default;
         width: auto;
    /* 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: 100px;
         float: left;
         height: 10px;
    /* 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: 100px;
         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: 100px;
         height: 30px;
    /* 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;
         background-color: #FEF3E4;
         padding: 0.5em 0.75em;
         color: #FFF;
         text-decoration: none;
         background-repeat: no-repeat;
         background-image: url(../rot.jpg);
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
         color: #FF0;
    /* 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: #FEF3E4;
         color: #FF0;
         background-image: url(../rot.jpg);
    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-color: #FEF3E4;
    /* 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-color: #0F9;
    /* 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-color: #FEF3E4;
         color: #FF0;
    /* 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-color: #F99;
    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;

    Complete page and css code below (scroll down)
    All you should be concerned with at this moment to get the background image to appear in the top level anchor is the css style below:
    /* 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-color: #000;
    background-image: url(../rot.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    I've added the background-postion because presumably you want it to appear flush left. This overides the out-of-the-box setting which positions it 95% far left.
    Here is the code and css:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Unbenanntes Dokument</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <head>
    <style type="text/css">
    <!--
    #container {
         margin-right: auto;
         margin-left: auto;
         width: 400px;
    -->
    </style>
    <style>
    ul.MenuBarHorizontal
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 100%;
         cursor: default;
         width: auto;
    /* 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: 100px;
         float: left;
         height: 10px;
    /* 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: 100px;
         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: 100px;
         height: 30px;
    /* 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;
         background-color: #FEF3E4;
         padding: 0.5em 0.75em;
         color: #FFF;
         text-decoration: none;
         background-repeat: no-repeat;
         background-image: url(../rot.jpg);
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
         color: #FF0;
    /* 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: #FEF3E4;
         color: #FF0;
         background-image: url(../rot.jpg);
    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-color: #000;
    background-image: url(../rot.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    /* 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-color: #0F9;
    /* 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-color: #FEF3E4;
         color: #FF0;
    /* 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-color: #F99;
    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);
    </style>
    </head>
    <body>
    <div id="container">Raum für den Inhalt von  id "container"
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">Element 1</a>  </li>
    <li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
        <ul>
          <li><a href="#" class="MenuBarHorizontal">heija</a>      </li>
          <li><a href="#">soso</a></li>
    </ul>
      </li>
      <li><a href="#">Element 4</a></li>
    </ul>
    <p>  </p>
    <p> </p>
    <p> </p>
    <p> </p>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

  • How to add different background image for submenu items???

    Hi all,
    I'm pretty new to web design and CSS in particular. Here's my problem...
    I've got a Spry horizontal menu bar (untouched as yet), and I want to have a different background image for my submenu items than that of my menu items. From searching the internet I think that I need to apply a class to the submenu item (please correct me if I am wrong).
    How would I go about doing this and how would I assign the class to just the submenu items?
    Also ideally I want to have my first and last menu items to have rounded corners on one side (therefore making a rounded edge menu bar), is it possible to have a different background image for individual menu items? If so, how?
    Really appreciate any help!

    Thanks for the link! I've managed to sort the background issue, and it seems to be working fine!
    Just one little issue left to tackle...
    I want my text to be centered in my top menu items BUT aligned left in my drop down menu items. I have managed this but the text hugs the left hand side. I've tried adding a little margin to the left but that doesn't seem to affect anything???
    Here's my CSS... Any ideas which class I should be targeting or why adding the margin isn't working would save my tearing the rest of my hair out! thanks! (screenshot attached).
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
    /* 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;
        cursor: default;
        width: auto;
    /* 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;
        list-style-type: none;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 120px;
        float: left;
        height: 24px;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
        background-repeat: repeat-x;
        background-color: #333333;
        background-image: url(../images/navbar_bg.jpg);
        border-right-width: 1px;
        border-left-width: 1px;
        border-right-style: solid;
        border-left-style: solid;
        border-right-color: #000000;
        border-left-color: #666666;
    ul.MenuBarHorizontal li li
        list-style-type: none;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: auto;
        float: left;
        height: 24px;
        background-color: #333333;
        background-image: none;
        padding: 0;
        margin: 0;
        left: -1px;
    ul.MenuBarHorizontal li li a
        list-style-type: none;
        position: relative;
        text-align: left;
        cursor: pointer;
        float: left;
        height: 24px;
        background-image: none;
        font-size: 12px;
        font-weight: normal;
        border: 0px 0 0;
        width: 120px;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        padding: 0;
        margin: 0;
    /* 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;
        list-style-type: none;
        font-size: 100%;
        z-index: 1020;
        cursor: default;
        width: 120px;
        position: absolute;
        left: -1000em;
        height: 24px;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
    /* 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;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        height: 24px;
        width: 120px;
        margin-top: -5%;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 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;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal li a
        display: block;
        cursor: pointer;
        text-decoration: none;
        font-style: normal;
        text-transform: capitalize;
        text-align: center;
        white-space: normal;
        padding: 0px;
        height: 24px;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 20px;
        margin: 0px;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal li a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        background-color: #000000;
        background-image: url(../images/navbar_bg_hover.jpg);
        background-repeat: repeat-x;
        line-height: 22px;
    ul.MenuBarHorizontal li li a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        background-color: #000000;
        background-image: none;
        background-repeat: repeat-x;
        width: 120px;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #FFFFFF;
    /* 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-repeat: repeat-x;
        background-position: 95% 50%;
        background-color: #333333;
        background-image: url(../images/navbar_bg.jpg);
    /* 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-repeat: repeat-x;
        background-position: 95% 50%;
        background-color: #000000;
        background-image: url(../images/navbar_bg_hover.jpg);
    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;
    /* 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;

  • Adding A Separate Background Image For Each Menu Item

    I asked this in the Spry forum, and not sure I understand the answer. Plus, I should have been more specific in asking how to do it, as I'm still pretty new to this stuff. Nothing I'd found indicated it could be done, or how.
    Org question -
    I know you can apply a background image to the menu bar items, but is it possible to add a background image for each individual item? What I'm basically trying to keep are the effects (bevel/emboss, etc.,) that I attached to the text, when I created it in PS CS4.
    Answer -
    Yes you can. The widget is just normal plain html markup so you can just add other classNames or id attributes to the elements. And style the elements through those classes/ids.
    Does this mean I'd have to write a new rule for each menu item? What?
    Thank you.

    Did an Adobe Tutorial for creating/entering a Spry Menu Bar. This is the HTML, after I took out the submenus.
    <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="news.html">Features</a></li>
          <li><a href="news.html">News</a></li>
          <li><a href="news.html">Fashion</a></li>
          <li><a href="news.html">Lifestyle</a></li>
          <li><a href="news.html">Calendar</a></li>
        </ul>
    This is from the SpryMenuBarHorizontal.css (It seems like I need to make changes in the Design Info section of this code. But nothing I've tried has worked):
    /* 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: auto;
    text-transform: uppercase;
    /* 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: left;
    cursor: pointer;
    width: 7em;
    float: left;
    /* 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: 8.2em;
    /* 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;
    background-color: #EEE;
    color: #333;
    text-decoration: none;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #33C;
    color: #FFF;
    /* 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;

  • Why do I not see the background image with html5 boilerplate

    hello,
    I downloaded the html5 boilerplate
    And in the main.css I made this :
    body {
        font: 16px/26px Helvetica, Helvetica Neue, Arial;
        background-image: url(../img/background.jpg)
    and also in the normalize.css I set this :
    body {
        margin: 0;
        background-image: url(../img/background.jpg)
    But in IE10 I still do not see the background image.
    Can anyone tell me what I did wrong ?
    Roelof

    Hello
    You need to run your VI once. Wire the Select Signals express VI to your DAQ Assistant and run the VI once (this allows the signal names to propegate).
    Check this forum:
    select signals
    Regards

  • Keep background image same when creating new workspace

    Hi and thanks in advance for any input,
    Up until I plugged in a mini-display port to HDMI connection/dongle I would have the same background when I created a new workspace (OSX 10.7 Lion).
    Now, when I create a new workspace, the background set's itself to the first picture in a set folder with a default option of rotating the background image after a set period of time.
    My question is this: how do I get back to the use case that I am familiar with, where a new workspace has the same background image as the original 'Desktop 1' background?
    Thanks for looking,
    Jordan from CO

    Hey Richard,
    What are you Desktop properties set to?
    This is an interesting question. My initial (Desktop 1) properties are as follows:
    // Properties are set to keep the same background image
    However, when I add a new Space, to create Desktop 2, my desktop properties default to:
    // Properties of 'New Desktop' (Space) default to Change picture every 10 minutes.
    // When I am connected to an external display, the background image of Bonaroo shown in the screen shot becomes the new default; what is odd is that when the external display is not plugged in, another background becomes the default. Odd.
    So, replying to your comment made me think of something which ended up being the answer that I have been looking for:
    •Why not duplicate the background and place it in its own folder? This way, there would be no other images for it to default to and to change the properties away from, as the folder has not changed.
    Indeed a workaround, but the answer to my problems:
    One more thing to address:
    Even if you don't have random backgrounds set, I would think it a good design idea to make them random.  Otherwise users could easily become confused about which desktop they are looking at.
    My rebuttal to your design philosophy is that I love the consistency a single background presents. Think of iOS: one background, multiple pages. Users look at the content presented on the page. I regularly use the four finger gesture to enter the 'Exposé' feature of OSX Lion, and this gives me further indication of which desktops arrangement.
    I have read other reviews stating that the feature you noted is a great idea, so you are not alone (to have multiple desktop backgrounds for color coding what workspace/desktop/space you are in). My experience was somewhat jarring, however, as I was used to a specific use case of a consistent background; thus I have been posting in an effort to find a solution to my problem. Again, thank you for your insights; you are the one that lead me to a solution, afterall.
    // Separate note: expose will rearrange your windows/spaces/workspaces/desktops when you utilize command+tab. This design feature has a distinct iOS feel; as in iOS, your spaces and apps are dynamically rearranged based on the order or applications used.
    // Here is a quick photo example illustrating the point:
    // (I would have taken a screen shot of the command-tab interface but I cannot take a screen shot while holding down command; I use command-shift-3 for a full screen shot)
    1) Apps open in order (for this purpose I am sticking to one application per space and am including two fullscreen apps ): Finder, Safari, System Preferences, Mail
    // If I command+tab over to the full screen Mail app, my spaces are now rearranged as follows:
    // So now, to further illustrate the point, I can get 'Desktop 2' to be next to Desktop 1 by command-tabbing from Finder [Desktop 1] to System Preferences [Desktop2]; when I enter expose, the spaces are again rearranged to this:
    // This is similar to iOS' multitasking where a users multitasking list is dynamically rearranged based on the app that was used last in order to allow the user to gesture to the last app with ease.
    Message was edited by: jordoapp

  • How do they get background image to span browser width?

    At http://www.archerschoicemedia.com, they have a background image at the top that spans the entire browser width. How is that achieved? What if image isn't as wide as screen resolution, won't it just repeat?
    All help with adding a background image that does this - spans the entire browser width - is what I'm after.
    Thanks!

    What if image isn't as wide as screen resolution, won't it just repeat?
    No.
    The CSS reads
    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
            background:url(../i/backgroundvid.jpg);
            background-position:center top;
            background-repeat:no-repeat;
            background-color:#000000;   
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    overflow-x: hidden;
    overflow-y: auto;
    So, the CSS is set to horizontally center the background image and not repeat it.
    Plus, on screens wider than 1689px wide, the background color of black (#000000) shows through at the edges creating the impression that the background is endless.

  • Background Image in JPanel.

    Hi, I am trying to set a background image to my JPanel. So far everything ok. However When I add labels to this panel as well the image is displayed but the label is not! I tried to make a search on google, and I found some links pointing to this forum, however none of them (which) I have seen show how to display a backgroun image and a label on top.
    What I tried to to is override the paint method of the JPanel. Here I did the following code:
    public void paint(Graphics g){
       Image i = this.myImage // Were myImage is of type Image with a loaded image in.
       g = super.getGraphics();
       g.drawImage(i, 0, 0, this);
       super.paint(g);
    }However this code brings the label and the image always blinking. I can imagine the reason for this is that the paint method is called all the time, and thus the image and the label are being painted all the time and so there is the blinking effect.
    Does anyone know how I can set a background image to my JPanel in an efficient way?

    No Gosling? I just retried it and it works for me.
    Maybe you're having trouble with the image URL.
    Try it with a local image.

  • Background image on a JPanel

    Hi
    I wonder if there's possible to set a background image, not just a colour, on a JPanel, and if so, how do I do it?
    /Nicklas

    import com.sun.image.codec.jpeg.JPEGCodec;
    import com.sun.image.codec.jpeg.JPEGImageDecoder;
    import java.awt.*;
    import java.awt.image.BufferedImage;
    import java.io.InputStream;
    import javax.swing.*;
    public class PicPanel extends JPanel
    public PicPanel(InputStream theStream)
    try
    setPicture(theStream);
    setMinimumSize(new Dimension(picture.getWidth(), picture.getHeight()));
    setMaximumSize(new Dimension(picture.getWidth(), picture.getHeight()));
    setPreferredSize(new Dimension(picture.getWidth(), picture.getHeight()));
    setLayout(new GridBagLayout());
    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
    SwingUtilities.updateComponentTreeUI(this);
    catch(Exception e)
    e.printStackTrace();
    public void setPicture(InputStream i)
    try
    decoder = JPEGCodec.createJPEGDecoder(i);
    picture = decoder.decodeAsBufferedImage();
    catch(Exception e)
    e.printStackTrace();
    public void paintImmediately()
    super.paintImmediately(getBounds());
    public void paintComponent(Graphics g)
    Graphics2D g2 = (Graphics2D)g;
    g2.drawImage(picture, 0, 0, Color.white, null);
    paintChildren(g);
    JPEGImageDecoder decoder;
    BufferedImage picture;

Maybe you are looking for