Cell background image problem

Please tell me exactly how to add only one background gif to
a cell. I have
told it "no repeat" but it does just that. See:
http://www.pskewedp.info/content.htm
Thank you, Eleanor
Eleanor T. Culling
Leavenworth, WA
European Alps Photos
http://www.eleanorstravels.com/photoblog-issue19.htm

Thank you so very much! Please watch this thread, I'll
probably need a bit
more help. I have 3-4 images I need to use this way, as table
or cell
backgrounds. Will I have
#cellBg2 and 3 and 4?
Eleanor T. Culling
Leavenworth, WA
European Alps Photos
http://www.eleanorstravels.com/photoblog-issue19.htm
"Osgood" <[email protected]> wrote in
message
news:[email protected]...
> E. T. Culling wrote:
>
>> Please, what do you mean by this:
>> "Refer deesadler's reply in this thread." I don't
see that.
>>
>
> Hi Eleanor,
>
> You need to use some css to apply the background image
to the cell. The
> complete page code you need is beneath these
instructions, just in case
> you have trouble in implementing the changes.
>
> The css is below (add it to the css styles which already
exist in the head
> section of your page)
>
> #cellBg {
> background-image:
url(Graphics/Content-box-top-775.gif);"
> background-repeat: no-repeat;
> }
>
> Then you need the add the id 'cellBg' to the cell as
below and remove
> 'background="Graphics/Content-box-top-775.gif'
>
> Like this:
>
>
> <td id="cellBg" width="774" height="201"
valign="top">
>
>
> Here is the complete revised page:
>
>
> <!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=iso-8859-1" />
> <title>Untitled Document</title>
> <style type="text/css">
> <!--
> body,td,th {
> font-family: Arial, Helvetica, sans-serif;
> }
> body {
> background-color: #CCCCCC;
> }
> a:link {
> color: #006699;
> text-decoration: none;
> }
> a:visited {
> text-decoration: none;
> color: #006699;
> }
> a:hover {
> text-decoration: underline;
> color: #006699;
> }
> a:active {
> text-decoration: none;
> color: #006699;
> }
> #cellBg {
> background-image:
url(Graphics/Content-box-top-775.gif);"
> background-repeat: no-repeat;
> }
> -->
> </style>
> </head>
>
> <body>
> <table width="1000" border="0" cellspacing="0"
cellpadding="10">
> <tr>
> <th width="1019" bgcolor="#f8f8dc"
scope="row"><table width="1000"
> border="0" cellspacing="0" cellpadding="0">
> <tr>
>
> <th colspan="2" scope="row"><img
src="Graphics/content header.jpg"
> alt="Content Page" width="995" height="87"
/></th>
> </tr>
> <tr>
> <th width="226" rowspan="3" align="left" valign="top"
> scope="row">Navigation</th>
> <td id="cellBg" width="774" height="201"
valign="top"><center>
> </center> </td>
> </tr>
>
> <tr>
>
> <td valign="top"><center>
> Footer
> </center> </td>
> </tr>
>
> </table></th>
> </tr>
> </table>
> </body>
> </html>
>
>

Similar Messages

  • Cell background image

    I would like to set a background image in a cell and have it
    not repeat. How do I do that?

    With CSS. If you need only one instance of this, define it
    inline like so:
    <table>
    <tr>
    <td style="background-image: url(your_image.jpg)
    no-repeat">
    your content here
    </td>
    </tr>
    </table>
    --Nancy O.
    Alt-Web Design & Publishing
    www.alt-web.com
    "lame user" <[email protected]> wrote in
    message
    news:g7sm0s$263$[email protected]..
    > I would like to set a background image in a cell and
    have it not repeat.
    How do I do that?

  • Tables/Cells/Background images

    Hello, this is probably a very minor issue but I am new to Dreamweaver so please bear with me (I am fairly technologically inclined and have a solid understanding of InDesign and Photoshop so I'm not a total beginner!).  I am trying to prepare an html email and from Google research I decided to construct a layout in a table with a top banner cell then two cells in the inside and a bottom banner cell (ie top banner, two columns, bottom banner if that makes sense).  I can't for the life of me figure out how to get a background image within an individual cell within the table.  I have looked up many articles on this and it looks so simple - select the cell, then in the Bg field you can either select a color or click the folder icon and choose a graphic.  I only have one Bg field and that is to select a color, no option no matter how I click, to get a Bg image.  Help please help!  Thank you!!!

    HTML emails can be very challenging if you've never done one before.  Suggest you read this over first.
    http://alt-web.blogspot.com/2010/02/html-emails-and-newsletters.html
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com

  • Centering background images problems

    Let's say I apply a background image to the body and center top the image like this
    =========================================================
    <body style="background:url(BG_05.jpg); background-position:top center; ">
    </body>
    =========================================================
    the background aligns itself in the center when the page load, and even if i resize the browser window the background image will center automatically...but is it possible to let the background stay in the same position even if i resize the browser's window?
    Many thanks...

    Sure.  Instead of applying the BG to your body, apply it to a #wrapper div along with an expressed width in px, and margin-left & margin-right of auto.
    CSS:
    #wrapper {
    width: 990px; /**adjust width to suit**/
    margin:0 auto; /**with width, this is centered on screen**/
    background: url(your_bg_image.jpg) top center;
    HTML:
    <body>
    <div id="wrapper">
    your centered page content goes here...
    </div>
    </body>
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/

  • Background Image Problem

    Hi all!
    I have a site that I'm attempting to get editable for a
    client in Contribute CS3. I retrofitted the site with Dreamweaver
    templates, but for some reason all of the background-images that I
    have set on my container div's disappear when I switch to edit
    mode. The background of the site is quite dark, which means that
    the client can't hardly see the text they're trying to edit when
    the background disappears. The links are the same color as the
    background as well, which means they become completely invisible.
    Any insight would be greatly appreciated!
    Matt

    Thanks for the reply!
    All of my background images are in CSS already, and I tried
    setting a corresponding background color to use as well in case
    Contribute was refusing to tile the bg image for some reason. That
    didn't work... The other posted solution on the board was to make
    sure that you are using paths relative to the stylesheet for your
    background images, which didn't work either.
    However, I did get it to work... I had a large masthead image
    that was just inline and not in a div. This was working because the
    image was the width of the container anyway, so it behaved like a
    block level element even though it really wasn't. So, I wrapped it
    in a div and everything works now... Obviously I should have done
    that from the beginning, but I didn't notice it because no browsers
    were choking on it. The background image now tiles properly, so
    they can now edit the text. There's still an issue with the bottom
    "cap" background graphic floating up too high, but that won't
    prevent them from editing.

  • JTable cell Background Color problem

    I overriden the table renderer and tried to chenge the color of only that row which has greater value in the third column. I coded the logic but it set the color of all the rows. The custom tablecellrendere code is as follows
          public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected,boolean hasFocus, int row, int column)
                cell = super.getTableCellRendererComponent(table, value, isSelected, hasFocus, row, column);
                   if(vuti[0]==0)
                        //cell.setBackground(Color.pink);
                        vuti[0]=counter;
                   else
                        if (counter>vuti[0] && !isSelected)
                          vuti[0]=counter;
                          cell.setBackground(Color.lightGray);
                      else if(counter<vuti[0])
                        cell.setBackground(Color.white);
                return cell;
          }

    In the code that sets the background, you have a if - else (if - else if) structure. What's the default setting, when none of the 3 conditions are met?
    And learn to indent your code correctly so that code blocks are readily apparent.
    [http://java.sun.com/docs/codeconv/html/CodeConvTOC.doc.html]
    db

  • Body background image not displaying in IE6

    I've looked at lots of questions about background image problems in IE6 but didn't see an answer to this one. I have a horizontal stripe on the page that's made of a background image in the <body> tag. The home page has a different size stripe than the subpages, so on the subpages I'm using a class style to call the background image.
    The home page body style looks like this:
    body {
        margin: 0;
        padding:0;
        text-align: center;
        background-image:url(../images/background_banner.jpg);
        background-repeat:repeat-x;
        height: 100%;
    And the subpages use this class style:
    .subpage {
        margin: 0;
        padding:0;
        text-align: center;
        background-image:url(../images/background_banner_sub.jpg);
        background-repeat:repeat-x;
        height: 100%;
    It works in all browsers except IE6, which loads the background image on the home page but not the subpages. So I suspect it's the class style it doesn't like. Is there an IE6 fix that will get it to work correctly?
    Here's the url of a subpage.
    Thanks,
    R-Co

    Well, both fixes still don't seem to work in IE6. And for some reason, the embedded style in the home page doesn't work at all. Here's the CSS for the method using different class styles for home and subpages:
    body {
        margin: 0;
        padding:0;
        text-align: center;
    .bodyhome {
        background-image:url(../images/background_banner.jpg);
        background-repeat:repeat-x;
        height: 100%;
    .subpage {
        background-image:url(../images/background_banner_sub.jpg);
        background-repeat:repeat-x;
        height: 100%;
    Here's a screen shot from Browser Lab showing what it looks like in IE6.
    Any ideas?
    Thanks again,
    R-Co

  • PAL background image size requirement

    I'm trying to help Shingy who asked a question about a background image problem (see the message thread at http://discussions.apple.com/thread.jspa?threadID=475370&tstart=0).
    Background images for NTSC projects (for at least the themes I've checked) seem to workout at the 'standard' image sizes: 720x540 pixel for standard and 854x480 pixels for widescreen.
    With PAL, using the PAL 'standard' image sizes: 768x576 pixel for standard and 1024x576 pixels for widescreen - results in images far larger than the background.
    Any suggestions to help Shingy?

    Fred,
    I don't know much about pic sizes, but maybe Karl's tables can help:
    http://discussions.apple.com/thread.jspa?messageID=2090899&#2090899
    mish

  • Problem with Background image and JFrame

    Hi there!
    I've the following problem:
    I created a JFrame with an integrated JPanel. In this JFrame I display a background image. Therefore I've used my own contentPane:
    public class MContentPane extends JComponent{
    private Image backgroundImage = null;
    public MContentPane() {
    super();
    * Returns the background image
    * @return Background image
    public Image getBackgroundImage() {
    return backgroundImage;
    * Sets the background image
    * @param backgroundImage Background image
    public void setBackgroundImage(Image backgroundImage) {
    this.backgroundImage = backgroundImage;
    * Overrides the painting to display a background image
    protected void paintComponent(Graphics g) {
    if (isOpaque()) {
    g.setColor(getBackground());
    g.fillRect(0, 0, getWidth(), getHeight());
    if (backgroundImage != null) {
    g.drawImage(backgroundImage,0,0,this);
    super.paintComponent(g);
    Now the background image displays correct. But as soon as I click on some combobox that is placed within the integrated JPanel I see fractals of the opened combobox on the background. When I minimize
    the Frame they disappear. Sometimes though I get also some fractals when resizing the JFrame.
    It seems there is some problem with the redrawing of the background e.g. it doesn't get redrawn as often as it should be!?
    Could anyone give me some hint, on how to achieve a clear background after clicking some combobox?
    Thx in advance

    I still prefer using a border to draw a background image:
    import java.awt.*;
    import java.awt.image.*;
    import javax.swing.border.*;
    public class CentredBackgroundBorder implements Border {
        private final BufferedImage image;
        public CentredBackgroundBorder(BufferedImage image) {
            this.image = image;
        public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
            int x0 = x + (width-image.getWidth())/2;
            int y0 = y + (height-image.getHeight())/2;
            g. drawImage(image, x0, y0, null);
        public Insets getBorderInsets(Component c) {
            return new Insets(0,0,0,0);
        public boolean isBorderOpaque() {
            return true;
    }And here is a demo where I load the background image asynchronously, so that I can launch the GUI before the image is done loading. Warning: you may find the image disturbing...
    import java.awt.*;
    import java.io.*;
    import java.net.URL;
    import javax.imageio.*;
    import javax.swing.*;
    import javax.swing.border.*;
    public class BackgroundBorderExample {
        public static void main(String[] args) throws IOException {
            JFrame.setDefaultLookAndFeelDecorated(true);
            JFrame f = new JFrame("BackgroundBorderExample");
            f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            JTextArea area = new JTextArea(24,80);
            area.setForeground(Color.WHITE);
            area.setOpaque(false);
            area.read(new FileReader(new File("BackgroundBorderExample.java")), null);
            final JScrollPane sp = new JScrollPane(area);
            sp.setBackground(Color.BLACK);
            sp.getViewport().setOpaque(false);
            f.getContentPane().add(sp);
            f.setSize(600,400);
            f.setLocationRelativeTo(null);
            f.setVisible(true);
            String url = "http://today.java.net/jag/bio/JagHeadshot.jpg";
            final Border bkgrnd = new CentredBackgroundBorder(ImageIO.read(new URL(url)));
            Runnable r = new Runnable() {
                public void run() {
                    sp.setViewportBorder(bkgrnd);
                    sp.repaint();
            SwingUtilities.invokeLater(r);
    }

  • 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

  • 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 to get background image in cell not to repeat help please.

    hi folks,
    i want to fill a cell with a background image and not have
    the image repeat if the cell is resized by a viewer by enlarging
    the text. (Previously i jsut used CSS to control the text, so it
    couldn't be rezied, but now it seems that firefox ignores the CSS).
    ANyway i would like people not to be able to resize the cell and
    the background not to repeat.
    Here is an example that when the text is resized the
    background image and cell saty the same but a scroll bar appears
    for the text.
    http://www.stephenhuyler.com/projects.cfm
    thanks for any help!

    Use CSS -
    td.special { background-repeat:no-repeat; }
    for this cell -
    <td class="special"....
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "intolight" <[email protected]> wrote in
    message
    news:enh08e$8u9$[email protected]..
    > hi folks,
    >
    > i want to fill a cell with a background image and not
    have the image
    > repeat if
    > the cell is resized by a viewer by enlarging the text.
    (Previously i jsut
    > used
    > CSS to control the text, so it couldn't be rezied, but
    now it seems that
    > firefox ignores the CSS). ANyway i would like people not
    to be able to
    > resize
    > the cell and the background not to repeat.
    >
    > Here is an example that when the text is resized the
    background image and
    > cell
    > saty the same but a scroll bar appears for the text.
    >
    http://www.stephenhuyler.com/projects.cfm
    >
    > thanks for any help!
    >

  • Problems with the background image in IE

    Hi I've been optimizing some pages for the different browsers in Dreamweaver CS4. They all work fine in Safari, Firefox and Opera, Internet Explorer is, however not showing the background image I have selected. I can't for the life of me see what's going wrong! Any help wopuld be appreciated. here is the code on my index page which I built from a template. I don't know if it's the editable areas that are going wrong!
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>test site</title>
    <!-- InstanceEndEditable -->
    <link href="oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    background-repeat: repeat-x;
    background-image:url(file:///Macintosh HD/Users/me/Documents/websites/face_divorce/test/images/test_back.png);
    .oneColFixCtrHdr #container {
    width: 770px;
    margin: 0 auto;
    border: 0;
    padding: 0;
    .oneColFixCtrHdr #header {
    text-align: centre;
    border: 0;
    padding: 0;
    .oneColFixCtrHdr #header h1 {
    <img src="../images/test_logo.png"
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    font-size: x-large;
    text-align: right;
    .oneColFixCtrHdr #mainContent {
    padding: 0;
    .oneColFixCtrHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    font-family: Verdana, Geneva, sans-serif;
    color: #6699cc;
    font-size: 9px;
    font-style: normal;
    line-height: normal;
    font-weight: lighter;
        text-align: center;
    -->
    </style>
    <!-- InstanceBeginEditable name="head" -->
    <meta name="Description" content="facedivorce.com.com is an online resource tool to help guide you through the various stages of divorce.  Simply click on before, during or after divorce to find everything you could ever need to do with divorce.
    " />
    </head><meta name="keywords" content="test
    " />
    <!-- InstanceEndEditable -->
    <body class="oneColFixCtrHdr">
    <div id="container">
      <div class="oneColFixCtrHdr" id="header">
        <table width="740" border="0" align="center">
          <tr>
            <td  border="0" height="38" ></td>
            <td align="right" valign="bottom"><!-- InstanceBeginEditable name="HeaderLinks" -->
              <p class="TextButtons"><a href="index.html" class="TextButtons">Home</a>   <a href="featuredcompany.html" class="TextButtons">Featured Company</a>   <a href="youngpeople.html" class="TextButtons">Young People</a>    <a href="andmore.html" class="TextButtons">And More</a>    <a href="blog/index.html" class="TextButtons">Blog</a></p>
            <!-- InstanceEndEditable --></td>
          </tr>
          <tr>
            <th height="48" align="left" valign="bottom">
    <h1><a href="index.html" title="test"><img src="images/test_logo.png" alt="test" width="245" height="46" border="0" align="left" /></a></h1>
    </th>
            <td align="right" valign="bottom"><!-- InstanceBeginEditable name="HeaderButtons" --><a href="#"><img src="images/facebook-logo.png" alt="FaceBook Button" width="48" height="48" border="0" align="bottom" /></a> <a href="#"><img src="images/twitter_square.png" alt="Twitter Button" width="48" height="48" border="0" align="bottom" /></a><a href="#"><img src="images/blogbutton.png" alt="Blog Button" width="49" height="47" border="0" align="bottom" /></a>    <!-- InstanceEndEditable --></td>
          </tr>
        </table>
        <!-- end #header -->

    Hi
    The fact you are using a Mac is why both myself and JCellini assumed you where using a pre IE7 version.
    But the code you are using to test in IE will cause a problem with any 'virtual machine' such as crossover, because it cannot reference anything outside its own assigned section of the drive, and referencing the png in the way you are would be for it an invalid reference, it also would not work in any browser when you uploaded the site.
    Change - background-image:url(file:///Macintosh  HD/Users/myname/Documents/websites/test/Test/images/test_back.png);
    To - background-image:url(images/test_back.png);
    But if the region is not editable I would suggest you temporarily make it so, externalize your css to a css file, insert a link to the external css file in your head content, then lock the region once again. This way you will always be able to edit your css without worrying about 'locked regions'.
    PZ
    www.pziecina.com

  • 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();
    }

  • Problems with the background image size in a photobook

    Hi there, I really need help here. When I make a photobook I want to display my images large, taking the whole page. To do that I put the image as a background and it's OK. My problem is that when I do this, iPhoto always crops it. I have to use the move tool to move the image up and down, left or right to chose a best position. I don't want to do this, I want my image to be shown perfectly from end to end. I have to resize the image in many ways, even used the book's native resolution but it still doesn't work. If I choose "fit photo to frame size" I end up with two stripes at the top and the bottom of the page.
    Please help me, what size should I resize my image to, so that iPhoto displays it as it is?
    Thank you

    Hi
    The fact you are using a Mac is why both myself and JCellini assumed you where using a pre IE7 version.
    But the code you are using to test in IE will cause a problem with any 'virtual machine' such as crossover, because it cannot reference anything outside its own assigned section of the drive, and referencing the png in the way you are would be for it an invalid reference, it also would not work in any browser when you uploaded the site.
    Change - background-image:url(file:///Macintosh  HD/Users/myname/Documents/websites/test/Test/images/test_back.png);
    To - background-image:url(images/test_back.png);
    But if the region is not editable I would suggest you temporarily make it so, externalize your css to a css file, insert a link to the external css file in your head content, then lock the region once again. This way you will always be able to edit your css without worrying about 'locked regions'.
    PZ
    www.pziecina.com

Maybe you are looking for