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.

Similar Messages

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">
> 
> </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>
>
>

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/

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

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" />

<title>test site</title>

<link href="oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>

<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
" />

<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">
          <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>
        </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"><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>    </td>
      </tr>
    </table>
    

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

Main Wrapper, Container and background-image repeat problem-and Footer :-)

Hi everyone,
First off, i tried almost every idea i could get to solve this on my own but now im...aaa...
Well, the problem is i have a main wrapper with a background image repeat. A header,menu, body container - which has a left column and right column. I want that main wrapper,body container and both of the columns to grow auto according to content. I tried the height:100%. When i float the columns the text from left column spills over on to the footer. The left column also does not autogrow towards the footer?! I was able to set the footer at the bottom which i want it to remain at the bottom of the main wrapper, but the main wrapper and the columns do not grow automatically...I guess it has something to do with float and the clear properties but what???
body{
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
font-size: 11px;
font-family: verdana;
text-align: center;
background:url(back_index3.png) repeat-x scroll 0 0 #E4E4E4;
#main_wrapper {
width: 959px;
margin:0 auto;
margin-top:80px;
background:url(backslice.png) repeat-y;
height:auto;
min-height:800px;
#header {
width: 959px;
margin-left: auto;
margin-right: auto;
height:119px;
background:red;
padding-top: 0px;
padding-bottom: 0px;
#topmenu {
background-color:#blue;
height:30px;
margin:0px;
width: 959px;
margin-left: auto;
margin-right: auto;
#body_container {
height:100%;
width: 949px;
margin: 0 auto;
#content {
float:left;
width: 645px;
background:yellow;
border-right:1px solid #ffffff;
padding:10px;
height:100%;
text-align:left;
#sidebar {
float:left;
width: 283px;
background:#234234;
height:100%;
#footer {
clear:both;
height:200px;
background-color: #686768;
margin:0 auto;
border-top: 1px solid #F6F6F6;
text-align:center;
width: 100%;
<html xmlns="">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="3css.css" />
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<div id="main_wrapper">
     <div id="header">
      <span id="header_logo">title</span>
     </div>
     <div id="topmenu">
     menu
     </div>
     <div id="body_container">
      <div id="content">
content to be added
      </div>
      <div id="sidebar">
      hallow2
      </div>
     </div>
</div>
<div id="footer">
asd
</div>
</body>
</html>
Thanks in advance if somebody can help me out here.
you can see an image of the problem in the attachement down thr... thnx

<html xmlns="">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="3css.css" />
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<div id="main_wrapper">
     <div id="header">
      <span id="header_logo">title</span>
     </div>
     <div id="topmenu">
     menu
     </div>
     <div id="body_container">
      <div id="content">
content to be added
      </div>
      <div id="sidebar">
      hallow2
      </div>
     </div>
</div>
<br clear="all" />
<div id="footer">
asd
</div>
</body>
</html>
Hope this will work well

Background image display problem in IE6

I'm having another problem with my CSS. This one involves some background images not displaying properly in IE6. My navbar is an unordered list, and I'm using an image replacement technique to swap out the text for background images that serve as the buttons. The height of each button is 12 pixels, and the rollover is created by offsetting the image -12 pixels to reveal the bottom half of the image. So far so good. The images appear in all browsers, but IE6 displays more than 12 pixels of the image, revealing part of the rollover below it.
Here's the page in question: http://www.colbydesign.com/redesign/index.html
Here's a screen shot from BrowserLab of how the page looks in IE6: http://www.colbydesign.com/redesign/images/ie6_screenshot.jpg
The <ul> height and image height are set to 12 pixels. I can't figure out why IE6 has a problem with the CSS. Maybe there's an IE6 hack I can use? Any help would be appreciated.
Thanks,
R-Co

I didn't have a chance to work through the whole problem, but I believe that the font size of your "off-screen" menu text is pushing down the size of your ul and your li, as I see "overflow" outlines on that specific div.
Try giving those items #header h1 a, specifically, a smaller defined font size.
Alternatively, try applying an "overflow: hidden;" to the hover definition.
Beth

Problem with aligning buttons with background image.

Dear all,
Just an introduction, I am a newbie to dreamweaver and currently hopelessly lost in solving some problems, and wish to seek your advice and help here.
I am creating a webpage with a background that shows a line across near the top of the site. I placed an image with the line as background under the page properties. I am placing buttons on that line, so when I mouse over the buttons, the part of the line above the buttons will darken, showing that the button has been selected.
The image of the buttons include the darken lines and the words. I can align the button lines with the background line when viewing the site in 100%, but on other resolutions or if I zoom in 125% or 150%, the lines are not aligned.
Here is a picture of my dreamweaver working area, where I manually adjust the buttons to align with the background line. The button lines are already not aligned here, but they look aligned on site in 100%.
[IMG]http://i1126.photobucket.com/albums/l614/artbox11/pic1.jpg[/IMG]
Here are how the lines look at 150%. The arrows show where the button lines are not aligned with the background image line.
[IMG]http://i1126.photobucket.com/albums/l614/artbox11/pic2.jpg[/IMG]
Can anyone advise how I can align the button lines with the background image line so that whichever resolution I view the lines will be aligned from side to side? Any tips and advice will be greatly appreciated, as I have been looking around DW for a day now and cannot find out how to fix this.
Thank you!!

Dear Murray, thank you for offering to help, much appreciated.
Here are my codes. I did not write any of the codes though, I just use the design tab and built tables and insert images.
<!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>Metamorfic</title>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
</head>
<body onload="MM_preloadImages('Metamorfic Site Files/Button - About 2.jpg','Metamorfic Site Files/Button - Contact 2.jpg')">
<table width="800" border="0" align="center">
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td height="187"> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td width="116" height="32"> </td>
    <td width="552"> </td>
    <td width="110"> </td>
</tr>
</table>
<table width="1100" height="50" border="0" align="center">
<tr>
    <td width="1094" height="46"><table width="672" height="34" border="0" align="center">
      <tr>
        <td width="666" height="30" align="center" valign="bottom"><img src="Metamorfic Site Files/Button - About 1.jpg" width="122" height="28" id="Image3" onmouseover="MM_swapImage('Image3','','Metamorfic Site Files/Button - About 2.jpg',1)" onmouseout="MM_swapImgRestore()" /><img src="Metamorfic Site Files/Button - Contact 1.jpg" width="110" height="28" id="Image6" onmouseover="MM_swapImage('Image6','','Metamorfic Site Files/Button - Contact 2.jpg',1)" onmouseout="MM_swapImgRestore()" /></td>
      </tr>
    </table></td>
</tr>
</table>
<table width="800" border="0" align="center">
<tr>
    <td height="340"> </td>
</tr>
</table>
<table width="800" border="0" align="center">
<tr>
    <td width="300" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="300" align="center" valign="middle"> </td>
</tr>
</table>
<p> </p>
</body>
</html>

Re: Problem using Background Images

Newbie is trying to use a background image inside a table. It seems that if the table size is larger that the original image itself; then the table has a blank space where the image does not show; and if the table is smaller than the image; then the background image has a cropped appearance. What do we have to do to correct this problem?

Background images do not stretch to fill their container. At least they don't do this yet (reliably). That's just the way it is. Most people will fill the remaining space with a color similar to the overall image color, when the image is too small to fill the background. When it's too large? Well, that's just the way it is.

Background Image Problem

Similar Messages

Maybe you are looking for