Static Background Image

How
do I create a background image that does not move
when the main body of the page scrolls? I assume it is through a
layer but can't find any information on how to do it. I have my
background image now, but the text does not move across it when I
scroll.
Thanks for any help you can give,
TBC

There's a few background image examples here:
http://www.dreamweaverresources.com/tutorials/index.htm
Look about half way down the page.
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.macromedia.com/devnet/dreamweaver/css.html
- CSS Tutorials
"ZAPphoto" <[email protected]> wrote in
message
news:e2t1i2$bia$[email protected]..
>
How
do I create a background image that does not move
when
> the
> main body of the page scrolls? I assume it is through a
layer but can't
> find
> any information on how to do it. I have my background
image now, but the
> text
> does not move across it when I scroll.
>
> Thanks for any help you can give,
>
> TBC
>

Similar Messages

Add static background image to all frames of gif animation

First, I'm not a fireworks regular. I use it when I have to to get something done (mostly web optimazations). I would use it more but, frankly in many cases the UI is counter intuitive to everything else adobe makes.
Here is my problem...
I need to add (not replace) a static background to ALL existing frames(states) in a fireworks gif animation (with alpha) , the end product gif will be an element in the Edge web animation...details
I have an animated seq of a rotating object that was created in 3ds max and rendered as a png seq with alpha.
I opened the SEQ "as animation" in fireworks. I set the frame rate. It plays fine. So far so good....
I imported an image that I want to be BEHIND the animated seq on ALL frames. I tried puting it on a sub layer behind, i tried puting it on it's own layer behind, but it ONLY shows on the first frame (state).
I tried using "share with all states" but it replaces the SEQ images already on the "states" instead of adding it behind them like in the arrangement of the layers.
So first, can this be done and if so how?
Second, why is this process so counter intuitive in fireworks? I mean if a layer is behind something then it should be a simple button click or check box etc to say "show on all frames (states)", you know like any other product adobe makes. Even "image ready" made more sense than this. My thought process was that since I needed to end up in fireworks to create and optimize the gif that i should be able to put it together there also but it's turning out to be a lot harder than it should. I guess I can just composite my elements in AE (which is a piece of cake compared to fireworks) and then render another SEQ that I import to fireworks to create the optimized gif. While I'm a fan of the "creative suite" concept, one of my biggest complaints about the "suite" is the lack of master oversite so the common functions, keyboard shortcuts, and fundimental UI concepts are consitant accross all the apps so it functions as a "suite" and not just a collection of seperate applications. I know that demanding that all applications follow certian rules would slow development, in the long run it would make it a lot easier for the end user to spend more time being "creative" and less time trying to figure out why something doesn't work like it does in all the other apps. Just my $.02
Thanks for any help and or explaination
Joel H

Thanks for the response.
You know I tried that exact thing the only difference being I didn't change the layer names. So not naming the layers would keep that from working ?? Also as you eluded to draging layers to position them in fireworks is a delicate operation. It always seems to take 2 or 3 times to get it to drop where you want it. I named the layers and it works as you said. Unfortunately I was really pressed for time so I had already given up on fireworks and just composited the SEQ with the BG layer in AE and kicked out another PNG SEQ and then open that "as animation" in Fireworks and then optimized and exported as a gif. So there are allways several ways to do things.
Thanks again,
Joel H

Static background image will tile when not needed

So i made my background static with some code, but now i can see it tile a little on some screens when it should not. I don't know if it's a size issue or not, i need to know how i can have this centered and even on all display screen. Can you guys help me please?
Using iWeb. Everything looks great on my screen and evenly aligned on both side. 21.5" display using Safari and SL.
Code i used:
<script language="JavaScript" type="text/javascript">

</script>
What my background should look like http://img229.imageshack.us/img229/7271/screenshot20100223at611.png
Thanks

That's what I get if I widen by browser window a lot. But it has to be a lot before the right hand part of the graphic comes into view. I added your code to a test page. If I keep my browser window at it's normal width I don't see any of the text on either size of the page body.
OT

Animated gif layered above background image

I have a static background image which is displayed in a JPanel. I need to display animated gifs at certain positions on the base image. For every new frame of the animation, the paint method is called whcih attempts to load the entire base image + all the new animated images which is extremely slow!. It also means the animated gif keeps on getting loaded, and seldom gets beyond the first frame.
Im sure many people have had to do something like this. Is the solution to draw the gifs on the glasspane (or use layered panes), and to have a seperate paint method? or is their a simple approach like setting a special clip area.

thanks for the help...
The size of the background image is approx 400*400 pixels (gif or jpg), and the icons are 25*25, and have between 1 and 6 frames.
Here comes the code... I havent finished with the mediatracker stuff, but youll get the idea Im sure.
public void paint(Graphics g) {
    MediaTracker tracker = new MediaTracker(this);
    tracker.addImage(image,0);
    try {tracker.waitForID(0);}
    catch (InterruptedException e){}
    g.drawImage(image, 0, 0, this); //draw background image (approx 400*400 pixels)
    int ICON_ID = -1;
    Image img;
    //draw all the icons...
    //all icons have between 1 and 6 frames. 25*25 pixels.
    for (int i = 0; i < icon_IDs.size(); i++) {
      try {
        ICON_ID = new Integer(icon_IDs.elementAt(i).toString()).intValue();
        Point p = dm.getIconPosition(ICON_ID);
        if (isAlarm(ICON_ID)) {        //ITS AN ALARM - use animated gif
          img = getAlarmImage(ICON_ID);
        else                          //NORMAL ICON - no animation
          img = DataDefinition.getImageIcon(dm.getIconType(ICON_ID)).getImage();
        tracker.addImage(img,0);
        try {tracker.waitForID(0);}
        catch (InterruptedException e){}
        int width = DataDefinition.getSize(dm.getIconType(ICON_ID)).width;
        int height = DataDefinition.getSize(dm.getIconType(ICON_ID)).height;
        g.setClip(p.x, p.y, p.x+width, p.y+height);
        g.drawImage(img, p.x, p.y, p.x+width, p.y+height, 0,0,img.getWidth(this),img.getHeight(this),this);
      catch (SQLException sqle) {
        System.out.println("Could not find position of icon : " + ICON_ID);
}

IWeb 08: Static horizontal menu with background image

Hi
I want to make a static horizonal menu bar. I want to have a 800px x 40px black bar that has a background image from the same size. The reason of a background image is because I want a logo to be in that menu. I have searched in google for samples but I haven´t been able to find one that is simple and that I can incorporate the logo in the background. Can somebody tell me a link to a place to get this or tell me a code ? I don´t know html thou
thank you in advance

Don't really understand exactly what you are asking here? Why do you need any code to create a menu bar? You can do this very easily in iWeb.
To create a menu bar:
1. Open your page in iWeb and then open the Inspector and go to Page and click on 'Hide from menu' and 'Don't include in menu and this will turn off the iWeb built in template navigation menu.
2. To create your own menu bar, simply use either a text box or a shape and make it 800px by 40px and then place it on your page where you want your nav menu to be and type in your links and then hyperlink them to your pages by opening the Inspector and opening Hyperlink - 2nd from the end and then highlighting the text and linking to relevant pages and then setting the colours via the format link.
Don't quite understand why you want a background image in a nav menu? It will be very hard to get anything of those sizings and people do not usually have a background image in a nav menu - normally a colour. A nav menu is not the place for background images or logos - it is too small and all this should be in your header section instead.
If you want more help, then please be precise about what you are asking.

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

Animated GIF as a background image on a C5-00?

Is there any way to get animated GIFs runnig as a background image on a C5-00? At the moment, it just shows a still picture....

Yes, Captivate 7. I'm re-working an old Dreamweaver HTML CBT program to bring it up to today's standards using Captivate. I previously had small cartoon hands pointing to the right or left to click to go to the next or previous slide.The pointing hands are static, but on rollover I had an animated gif of the pointing hand moving in the direction it pointed. I'm certain I can figure out a workaround, just wanted to see if there was a built-in way to have an animation be the 'over' state.

How to put a background image in coldfusion page?

Hi all,
I have created number of coldfusion pages,i would like to have a background image for them either unique or different images.
So i have created a style.css and added a line for background image like
                    background-image: url(/images/nature.jpg);
But it doesn't works.
Even i tried this by giving in head section of all my cfm pages but it doesn't work.
Also i have used
<head>
     <style type="text/css">
          html {overflow-y:hidden;}
          body {overflow-y:auto;}
          #page-background {position:absolute; z-index:-1;}
          #content {position:static;padding:10px;}
     </style>
</head>
<body>
     <div id="page-background"><img src="images/sri.jpg" alt="Smile"></div>
         <div id="content">
              This is body content
         </div>
</body>
but the alt value 'smile' only appearing not the image.
I'm working on CFBuilder.
Both firefox and IE not displaying the image
Any help appreciated,
Chandru P

The fact that this is in a CF template is neither here nor there (other than the caveat about # as the other person said).
All CF does is generate mark-up. The mark-up is sent to the browser, and the browser renders it. So if your browser isn't rendering your image assets, it's because it can't find them.
I suspect your URLs are wrong. Are you getting 404s for the image URLs?
One thing to bear in mind is that URLs to resources are not relative to the CFM template they're in, they're relative to the URL the client requested, which are not necessarily (indeed very infrequently ~) the same.
Adam

Background image in a table not in the document

hello forum, i would like to put a background image in a table so that I am able to put things on top of the image and so it moves with the table. I can only figure out how to do it in the page properties so that it is static on the page. Can anyone please tell me if what I am trying to do is possible? thank you in advance. Jim.

Hi John,
thanks for your hint, now I've got it. And so I was able to integrate/to play with Gramps hint in some variations too.Hans-G.

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

Website with Full Screen Background Images

I'm trying to create a website with full screen background images (or possibly, a video) that will crop to the browser window. It's also important that the image be center-justified. The Die Antwoord site does pretty much what I'm trying to accomplish. I'd also like to know how they can use such high resolution images. If I try to use a high res image, the file size is enormous. Another site that uses similar technology only with a video is the TV on the Radio site.
I am fairly new to Flash so please forgive me if this is a rudimentary question. Any help will be greatly appreciated.

Hi Bob,
Thanks for your reply.
What I'm concerned about is the crispness of my full-page images. Am I right in assuming with a PDF folio, static images won't be as crisp? Is there a way to maintain its sharpness?
M

Background image for a Scene in JavaFX2.0

Hi all,
I am new to JavaFX2.0 and need to know how to set a background image for a scene.
Thanks in advance.

Hi,
here is simple example:
bgtest.css
.root {
    -fx-background-image: url("mybg.jpg");
}BackgroundImage.java
package playground;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class BackgroundImage extends Application {
    StackPane root;
    Scene scene;
    Button button;
    public static void main(String[] args) {
        launch(BackgroundImage.class, args);
    @Override
    public void start(Stage stage) throws Exception {
        stage.setTitle("Custom Background Test");
        button = new Button("test");
        root = new StackPane();
        root.getStyleClass().add("root");
        root.getChildren().addAll(button);
        scene = new Scene(root, 600, 600);
        scene.getStylesheets().add(BackgroundImage.class.getResource("bgtest.css").toExternalForm());
        stage.setScene(scene);
        stage.centerOnScreen();
        stage.setVisible(true);
}

Background Image on a Report Region

Greetings,
Is it possible to put a background image on a report region? Using the code shown below I can get an image on most other region types, but the code simply doesn't work on a report region.
Thanks in advance for your help, Tony
REGION HEADER
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="left"
background = "#WORKSPACE_IMAGES#image.jpg">
<tr height="500px" align="left" valign="top">
<td>
REGION FOOTER
</td>
</tr>
</table>

cloaked wrote:
Greetings fac586,
Been reading up on CSS's. I guess the main aspect is to determine the CSS component that deals with the Tabular Form in the Template I am using and modify it. I would need to modify the background attribute of the Tabular Fom, right?
Gotta crawl before I walk, so I am also assuming that I would modify the CSS initially with a hard-coded background image. Then, if I get that to work I would make the image dynamic based on the criteria in a database. Am I on the right track?
Is there a common attribute/component in the Apex Template CSS's for Tabular Forms? I've tried to find it, but am not sure what I'm looking for.Tabular forms can be created using any report template—built-in or custom—so the CSS will differ by theme and template.
Yes, you can define background images for report templates, but It's not appropriate to do what you're trying to do at the report template level. Templates are static and defined at design-time. Challenging Apex Page - Grid with 100+ items - Suggestions Needed. This needs to be dynamic and determined at run-time.

Background image under a list

Hello!
I need to view a background image under a list.
I've done this for a panel overriding the paint method but for a list it doesn't go.
Can someone help me?
Thanks

I believe that my code is right..
I extends List component and override the paint method.
First, I draw the image, then I call the super method.
Then, in a main method I add the list to a panel.
Where I'm wrong?
import java.awt.Graphics;
import java.awt.Image;
import java.awt.List;
import java.awt.Toolkit;
public class ListBg extends List{
     private static final long serialVersionUID = 1L;
     Image image;
     public ListBg(){
          super();
          Toolkit toolkit = Toolkit.getDefaultToolkit();
     image = toolkit.getImage("C:/Programmi/image.jpg");
     public void print(Graphics g){
          g.drawImage(image,0,0,this);
          super.print(g);
}

Background image in a JTextArea

How could I place a background image on a JTextArea?

Try this little program :
import java.awt.*;
import javax.swing.*;
public class TextAreaBackgroundImage extends JTextArea {
     Image image;
     public TextAreaBackgroundImage() {
          super();
          image = new ImageIcon("im.jpg").getImage();
          setOpaque(false);
     public void paintComponent(Graphics g) {
          g.drawImage(image,0,0,this);
          super.paintComponent(g);
     public static void main(String[] args) {
          JFrame frame = new JFrame("test");
          frame.getContentPane().add(new JScrollPane(new TextAreaBackgroundImage()));
          frame.setBounds(100,100,500,500);
          frame.setVisible(true);
}------------------------ unformatted version --------------------------
import java.awt.*;
import javax.swing.*;
public class TextAreaBackgroundImage extends JTextArea {
     Image image;
     public TextAreaBackgroundImage() {
          super();
          image = new ImageIcon("im.jpg").getImage();
          setOpaque(false);
     public void paintComponent(Graphics g) {
          g.drawImage(image,0,0,this);
          super.paintComponent(g);
     public static void main(String[] args) {
          JFrame frame = new JFrame("test");
          frame.getContentPane().add(new JScrollPane(new TextAreaBackgroundImage()));
          frame.setBounds(100,100,500,500);
          frame.setVisible(true);
I hope this helps,
Denis

Static Background Image

Similar Messages

Maybe you are looking for