Using image as a background

Hi there,
I am quite new at Dreamweaver and would like to know if and how it is possible to use an image as a background which fits all monitors. There are a few examples to be found on the internet where this is done.( www.wetransfer.com) Whenever you change the size of your browser window by dragging it, the image adjusts itself.
In other words I do not want borders on any side of the picture.
The main thing is that everybody who looks at the site should see the background-picture wihout any borders.
I have included a picture of a background with a lot of white surrounding it, as an example.
The white should not be there, but how?
The picture is a screen shot made from Browser Lab.
Hope you can help.
Thank you very much in advance.
Thijs.
This is how it should look like, no borders en resizable.

That particular one is part of a full page Flash animation.
This page explains how to do it with CSS and JQuery, though old browsers won't be able to see it the same way.
http://css-tricks.com/perfect-full-page-background-image/

Similar Messages

Using images with transparent backgrounds

Hello. I'm trying to design several forms using a large background graphic along with several other overlays (defined by the form user) that contain transparent backgrounds. Unfortunately, everytime I go to change the graphic, the program won't recognize the transparency of the overlay and substitutes white in it's place. So, for example, I have a background image that is rectangular and when my form user selects an overlay that is circular, it inserts the circle with a white background (which is supposed to be transparent). Can anyone help me with this?
Thanks!
-Mike

Min required version of flash player for my application is 9..
I think I figured it out, Here is my solution:
private function completeHandler(evt:Event):void
   var originalWidth:int=loaderG.content.width;
   var originalHeight:int=loaderG.content.height;
   var scale:Number = 0.5;
   var matrix:Matrix = new Matrix();
   matrix.scale(scale, scale);
   myBitmapDataObj=new BitmapData(originalWidth, originalHeight, true, 0xFFFFFF);
   myBitmapDataObj.draw(loaderG.content, null, null, null, null, true);
   var copyBitmapData:BitmapData= new BitmapData(originalWidth* scale, originalHeight* scale, true, 0x000000);
   copyBitmapData.draw(myBitmapDataObj, matrix, null, null, null, true);
   var myBitmapG:Bitmap=new Bitmap(copyBitmapData,PixelSnapping.AUTO,true);
   addChild(myBitmapG);
I also try blur filter on my bitmap:
var blur:BlurFilter = new BlurFilter();
   blur.blurX = 1.4;
   blur.blurY = 1.4;
   blur.quality = BitmapFilterQuality.HIGH;
   myBitmapG.filters = [blur];
Or is there better solution?

Using image as a background in Finder

Hi!
I am in the process of making a CD for submission to send to a company.
As part of the package I have designed some images for use in the BG of the Finder windows. I have opened the window and selected This Window Only, and navigated to the image and selected it. It of course appears. I have repeated this for a folder inside the main window too. A different image.
Then I have burnt the folder as a disk image in Toast.
On mounting the image the first disk folder image isn't present. Instead it is white. However, the second image is there.
I have seen DMGs that have these image sin the BG so i was wondering what is going wrong, or if there is an application that can do this for me?
Thanks in advance

If you look at the window of a CD that has the effect you are looking for in List View, you may see the picture's actually made up of custom icons for empty folders on the CD. Eash custom icon has a postage stamp part of the whole image, and the folders are arranged w/ their icons edge to edge in the window's Icon View.
This is a OS9 and earlier workaround for window BG pix accomplished by various share wares you may still be be to find on VersionTracker. IconMacher was one I recall.
Here's a URL on the topic, but be warned: the illustrations are NOT for the prudish:
http://corz.org/osx/tut/hotdisks.php

What's the best way to save an 8.5 x 11 image for use as a page background in a PDF?

What's the best way to save an 8.5 x 11 image for use as a page background in a PDF? My goal is to have a relatively small final .pdf file size that includes numerous pages with full 8.5 x 11 images as backgrounds in the document. If I save at 8.5 x 11 and 72dpi (example), the image is not 8.5 x 11, and the quality is not good enough. I need help with size, dpi, and file format to save as before I place it in InDesign and then save as a .pdf.
Thanks,
Jim

Do exactly what I said then. Create the InDesign document of the required dimension, and chose whether it will be high quality print, or Interactive PDF. It really doesn't mater what format you bring the image into that document. It can be JPG, PNG, but I usually use native Photoshop PSD. The image does have to be of high enough resolution, but it can be many times bigger than iis required for the final export. (InDesign does not import the image, but rather references it on your hard drive.)
When you have placed your text and finished your page, then export it to PDF, but go through the tabs chosing suitable settings. If the image needs to be downsized, InDesign will do that at this stage while building the PDF.
If you can tell us how this presentation will be made (Projector, overhead projector, printed page etc. or just emailed to the end users) we can help you more with the final output settings.

Using image or icon as background for JFrame instead of setBackground()

hello every one,
please, i'm trying to change the background of my FRAME using an icon or an image as the backgound whle still having my controls(JButton,JLabel,JTextField etc.) still on top of the image. Just like in HTML, for instace, the body tag can be use as follows:
<body background="c:\images\fly.gif">
and the image becomes the background.
Is this possible in java, if so please, how can i do this?
thank a lot for the help.

Check out this thread:
http://forum.java.sun.com/thread.jsp?forum=31&thread=353504

Using Flash as HTML background image?

Can I use a SWF as a HTML background image?
I've tried this a couple of different ways...
Any tricks to make this work?

davidlieb wrote:
> Can I use a SWF as a HTML background image?
No, you can't use SWF in html background.
The background does not allow any active content.
Best Regards
Urami
!!!!!!! Merry Christmas !!!!!!!
Happy New Year
<urami>
If you want to mail me - DO NOT LAUGH AT MY ADDRESS
</urami>

Using image as background of frame

I have a JFrame. I want to add an image (created from a jpeg file) on it as a background. Then, I will draw on that background.
Please tell me how can I do.
I tried to use createImage method from JFrame object
image = frame.createImage(440,400);
and then create image from file
image2 = Toolkit.getDefaultToolkit().getImage(filename);
Graphics g = image.getGraphics();
g.drawImage(image2,0,0,null);
I intend to draw some elements on "image" after that. However, the image doesn't not appear on the frame right at the beginning.
Please help me.
Thanks.

I didn't realize that what I wanted was double buffering and even JPanel supports double buffering. However, I still have a problem.
Please take a look at my code below.
public class MyFrame extends JFrame {
    static ImagePanel panel;
    static Image backgroundImage;
    public MyFrame(){
     super("Simulation Program");
    public static void main(String[] args){
        MyFrame frame = new MyFrame();
        frame.setVisible(true);
     backgroundImage = Toolkit.getDefaultToolkit().getImage("background.jpg");
     panel = new ImagePanel();
     getContentPane().add(panel);
        drawOnPanel();
    public void drawOnPanel(){
     Graphics g = panel.pic.getGraphics();
     g.drawImage(backgroundImage,0,0,panel); //does not work!
     g.drawRect(0,0,50,50);//works well
     panel.repaint();
class ImagePanel extends JPanel {
    boolean firstPaint = true;
    Image pic;
    public void paint(Graphics g) {
          if (firstPaint){
               pic = createImage(440,400);
          firstPaint = false;
          g.drawImage(pic,0,0,this); //redraw the image
}My problem is that method drawImage I use to draw the background image on the panel doesn't work. I don't know why.
If I assign the image to pic member of ImagePanel as such:
       pic = backgroundImage;instead of pic = createImage(x,y); the background image appears.
However, if I do that, I cannot call this following method in drawOnPanel():
      g = panel.pic.getGraphics();because it is said that "You may call getGraphics() only with offscreen image". Then, I cannot add more graphics on the background.
Thanks for your time.

Using binarize... Getting Tiff Image in Black Background..

Hi,
Basically my subject summarizes my problem, but I am trying to write some text to a blank JPEG file and then create a Tiff file from that JPEG...
But When i use the binarize i am getting the image as black background and the resolution is not that great...
I am using binarize, because i need to use TIFFEncodeParam.COMPRESSION_GROUP4 but i was getting bi-level error, that is why i am using binarize to create a GROUP4 with black and white color to minimize the file size...
I am posting the source code, i would appreciate someone can take a look at this code and figure out why i am getting black background...in the tiff file...
Any help will be greatly appreciated...
Thanks in advance...
========================================
import javax.swing.UIManager;
import java.awt.*;
* Title: 
* Description: 
* Copyright: Copyright (c) 2003
* Company: 
* @author unascribed
* @version 1.0
public class Application1 {
private boolean packFrame = false;
//Construct the application
public Application1() {
Frame1 frame = new Frame1();
frame.setVisible(true);
//Main method
public static void main(String[] args) {
new Application1();
================================================
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.borland.jbcl.layout.*;
import com.sun.image.codec.jpeg.*;
import com.sun.media.jai.codec.*;
import javax.media.jai.*;
import java.awt.image.BufferedImage;
import java.awt.image.RenderedImage;
import java.awt.image.DataBuffer;
import java.awt.geom.GeneralPath;
import java.io.*;
import java.awt.image.renderable.ParameterBlock;
* Title: 
* Description: 
* Copyright: Copyright (c) 2003
* Company: 
* @author unascribed
* @version 1.0
public class Frame1 extends JFrame implements java.io.Serializable {
private JPanel contentPane;
private JButton jButton1 = new JButton();
public static final String DEFAULT_FILE = "blank.jpg";
private static RenderedImage img;
//Construct the frame
public Frame1() {
enableEvents(AWTEvent.WINDOW_EVENT_MASK);
try {
jbInit();
catch(Exception e) {
e.printStackTrace();
//Component initialization
private void jbInit() throws Exception {
//setIconImage(Toolkit.getDefaultToolkit().createImage(Frame1.class.getResource("[Your Icon]")));
contentPane = (JPanel) this.getContentPane();
jButton1.setBounds(new Rectangle(125, 87, 79, 27));
jButton1.setText("jButton1");
jButton1.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(ActionEvent e) {
jButton1_actionPerformed(e);
contentPane.setLayout(null);
this.setSize(new Dimension(400, 300));
this.setTitle("Frame Title");
contentPane.add(jButton1, null);
//Overridden so we can exit when window is closed
protected void processWindowEvent(WindowEvent e) {
super.processWindowEvent(e);
if (e.getID() == WindowEvent.WINDOW_CLOSING) {
System.exit(0);
void jButton1_actionPerformed(ActionEvent e) {
String fileName = DEFAULT_FILE;
// Read the image from the designated path.
System.out.println("load image from '" + fileName+"'");
PlanarImage src = JAI.create("fileload", fileName);
// Generate a histogram...
Histogram histogram = (Histogram)JAI.create("histogram", src).getProperty("histogram");
// Get a threshold equal to the median..
double[] threshold = histogram.getPTileThreshold(0.5);
PlanarImage dst = JAI.create("binarize", src, new Double(threshold[0]));
BufferedImage bi = dst.getAsBufferedImage();
Graphics2D big = bi.createGraphics();
Graphics2D g2 = bi.createGraphics();
big.setFont(new Font("Dialog", Font.PLAIN, 20));
big.setColor(Color.black);
big.drawString("Data/Time Created:" + new java.util.Date(), 80, 210);
big.drawString("POLICY NUMBER: 1711215 NAME OF CALLER: BENEFICIARY", 80, 230);
big.drawString("Requested: Loan Request XXXXXXXXXXXXXXXXXXXXXXXXXXXXX Current Loan Value: $0.00", 80, 270);
g2.drawImage(bi, 0, 0, null);
try {
File file = new File("test.tiff");
FileOutputStream out = new FileOutputStream(file);
TIFFEncodeParam params = new TIFFEncodeParam();
params.setCompression(TIFFEncodeParam.COMPRESSION_GROUP4);
ImageEncoder encoder = ImageCodec.createImageEncoder("TIFF",out, params);
if(encoder == null) {
System.out.println("imageEncoder is null");
System.exit(0);
encoder.encode(bi);
System.out.println("DONE!!!");
catch (Exception ex) {

try this:
BufferedImage bi = new BufferedImage(1728,500,BufferedImage.TYPE_BYTE_BINARY);
Graphics2D big = bi.createGraphics();
Graphics2D g2 = bi.createGraphics();
big.setFont(new Font("Dialog", Font.PLAIN, 20));
big.setColor(Color.WHITE);
big.fillRect(0,0,1728,500);
big.setColor(Color.BLACK);
big.drawString("Data/Time Created:" + new java.util.Date(), 80, 210);
big.drawString("POLICY NUMBER: 1711215 NAME OF CALLER: BENEFICIARY", 80, 230);
big.drawString("Requested: Loan Request XXXXXXXXXXXXXXXXXXXXXXXXXXXXX Current Loan Value: $0.00", 80, 270);
g2.drawImage(bi, 0, 0, null);

Color Settings: Getting colors in PS CC to match colors of the image when used as a Windows Background

or vice versa. I probably do not know enough to be able to ask the question properly.
The colors of photos in PS CC are not the same when used as a desktop background in Windows 7. The colors are somewhat more saturated when as a background on the desktop and while not totally unusable, it would be nice to have matching color between my PS editing screen and the photo as viewed as a desktop background.
The following are some conditions that may or may not be relevant to the answer of my following question.
1.) I am a complete novice to Color Management so a presumption of knowledge and the heavy use of jargon may not penetrate my head.
2.) I shoot with sRGB embedded in my photos.
3.) My RAW conversions use sRGB IEC61966 - 2.1.
4.) My PS Color Settings are North American General Purpose 2 with sRGB IEC61966 - 2.1 as the working space and Intent as Relative Colormetric
5.) In the Win 7 Control Panel>Color Management>Device, my Device = NEC LCD2690wuxi, ICC Profile = NEC LCD2690wuxi (default), file name = nl269wui.icm
6.) In the Win 7 Control Panel>Color Management>Advanced, Device profile = System Default sRGB IEC61966 - 2.1 and (everything else set to System Defaults too). The only difference from the PS Color Settings being that Windows is defaulted to Perceptual Intent, but a change in either PS or Win 7 has no effect on the relative color differences.
7.) The monitor is set to the Native internal preset, but the relative differences in color remain the same even if the monitor is changed to sRGB, or any other internal preset.
8.) I have Proof Setup set to Monitor RGB but none of the settings will match the Win 7 Background color.
Now, my question is this. How would you set up your color settings/profile in PS and/or Windows to match color between PS and the Windows desktop of Windows 7?

Nevermind. I didn't have Proof Colors checked.

Using "Image/Transform/Perspective" on a layer?

Hi,
I'm new at this. I have a shot of a big room with empty art frames on the walls. I have rectangular layers that are shots of paintings that I want to drop into the frames, but of course the paintings layers have to be skewed to show the perspective angle (trapezoid) that matches the room. Problem is, it seems that I can only use Image/transform/perspective on the painting files before they become layers. This means guessing the perspective, then moving them into the background, which is trial&error at best. It's very hard to guess the appropriate perspective when the file isn't a layer. It seems that once the painting files become layers, the "perspective" option is no longer available. I can use "skew," or "free transform," but not "perspective." "Skew" doesn't work, because while it will allow changing the rectangle into a paralellogram, it won't allow me to change the rectangle into a trapezoid. "Free Transform" doesn't work for the same reason. So, How do you apply the "perspective" function to a layer?
If I knew how to change the rectangle by grabbing one of a selection's corner anchor boxes and fixing it place, that would help because I could create my own trapezoid, but I don't know how to do that. Does anyone?
Thanks!

I've no idea why all the transform options aren't available; they are here.
Anyway, try this:
Drag or copy/paste the painting in. It will come in as a new layer.
Convert that layer to a smart object (Layer > Smart Object > Convert..). Reduce the smart object opacity to 50%.
Choose Transform > Distort and move the corners individually into place.
When you're happy, set opacity back to 100% and rasterize the smart object.
The beauty of the smart object in this case is that you can transform repeatedly without any additional quality loss; it will be rendered only once when you rasterize.

Loading an image in the background and displaying it as it is loaded

Hi,
I'm writing an "image viewer" swing component, which should load an image in the background, and display it as it is loaded (for example each time a line of the image is loaded, display it)
Is there a way to do this using JAI or any other api ?
I guess i would need a way to check the loading progress from the EDT, get the loaded part of the image and display it. Am I right ? Is that possible ?
Thanks,
Nicolas

In the video inspector set the Spatial Conform to "none". This will give tou the actual size of the image in the viewer. You can then use the transform controls to adjust the image to what you want to see.

Framing image with transparent background png frame

hi,
i'm trying to find a way to frame images with transparent background png frames...
what i'm doing now is
1-drawing my image on a panel
2-creating a 2nd image using the frame's filename, stretching this 'frame-image' to a size slighlty larger than that of my main image and drawing the 'frame-image'
the problems with this method are:
1-depending on the width of the frame, the frame sometimes hides parts of the image (thick frame), and sometimes there is a gap between the frame and the image (thin frame).
2-if the image file containing the frame is larger than the frame (Ex: The image is 300x300, the frame is centered in this image and is 200x200; as opposed to the image is 200x200 and the frame takes up all the space), when i position the 'frame-image' near the top left corner of the image i want to frame, the frame appears at the wrong place (shifted down and to the right). This is due to the fact that i'm placing the top corner of the created 'frame-image' and not the frame, who is not in the top corner of my 'frame-image'.
Is there a way to do what i'm trying to do???
My ideas (which i don't know how to achieve are)
1-To 'analyse' my transparent background png file and
     1-only keep the frame,
     2-calculate the frame's thickness
OR
2-Let java do the analyzing for me and tell it to frame my image with the frame in the png file
please feel free to ask for more explanations if my description/question is confusing,
thanks.

Have you looked into the Border interface? If what you really want to do
is put a custom border on a component, you may be able to do it this way.
Anyway, here is some code that stacks and centres 2 images. It's not hard to do.
import java.awt.*;
import java.awt.image.*;
import java.io.*;
import java.net.*;
import javax.imageio.*;
import javax.swing.*;
public class Example extends JComponent {
    private BufferedImage backgroundImage;
    private BufferedImage foregroundImage;
    public Example(BufferedImage backgroundImage, BufferedImage foregroundImage) {
        this.backgroundImage = backgroundImage;
        this.foregroundImage = foregroundImage;
    public Dimension getPreferredSize() {
        int w = backgroundImage.getWidth();
        int h = backgroundImage.getHeight();
        return new Dimension(w, h); //assuming this is bigger
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        int w = getWidth();
        int h = getHeight();
        //paint both, centred
        int x0 = (w-backgroundImage.getWidth())/2, y0 = (h-backgroundImage.getHeight())/2;
        g.drawImage(backgroundImage, x0, y0, null);
        int x1 = (w-foregroundImage.getWidth())/2, y1 = (h-foregroundImage.getHeight())/2;
        g.drawImage(foregroundImage, x1, y1, null);
    public static void main(String[] args) throws IOException {
        URL url1 = new URL("http://weblogs.java.net/jag/Image54-large.jpeg");
        URL url2 = new URL("http://weblogs.java.net/jag/DukeSaltimbanqueSmall.jpeg");
        JComponent comp = new Example(ImageIO.read(url1), ImageIO.read(url2));
        final JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(comp);
        f.pack();
        SwingUtilities.invokeLater(new Runnable(){
            public void run() {
                f.setLocationRelativeTo(null);
                f.setVisible(true);
}

Using images with Transparency in Photobooks

I'm to a point where I would like to use images that utilize transparency in Aperture photo books. Is this possible? So far, PSD files that I've cropped with PS's lasso tools to have transparent areas surrounding their subject tend to change this area to white when dropped into a book.
Does anyone know of a way or format to use to retain this transparency? I love the speed of Aperture's photobook tools, along with export and printing options, and would like to be able to layer images that bleed together, or have a cut-out subject on top of others, but I haven't noticed a way as of yet.
Is this ability even available in Aperture yet?
If not, is there a third party plugin that gives it to the user when making photo books?
Please let me know soon, else i'm going to have to adjust my workflow back to photoshop only for page set layouts and the created PSD files on blank book pages- not fun.

i have been trying different ways to make it work fine, and find several things to consider:
Note: for the next ways i tried with images with transparency.
1 searching images in the iPad with safari and saving it into Photo app
then copying it with the popup and pasting it with the popup inside Pages or Keynote:
work fine.
2 using the saved images that worked fine in the first way but
then inside Pages in my opened document, using the menu to import the image from the
Photo app, to insert the same downloaded image used in the first case:
does not work, the image appears with a white background.
3 trying the first way (manually copying and pasting) but with the images i imported from
my MacBook Pro using the normal way via iTunes(10.1.1 (4))
does not work, some images appears with a black background, other images
appears with a white background.
4 trying with the images of the third way, but changing the method using the photo app
menu from Pages
does not work as in the third way
i dont have problem using transparency images in the first complex way.
my problem is when i try to use images with transparency in the other three normal ways.

Using images in Spry menus

Can someone please point me to instructions on how to incorporate button images in horizontal Spry menus?

Here's the working model for the menu I created using images for the main menu tabs: http://mmfc.org/HomePage_CleanUp/index_working.html. And here is the style sheet: http://mmfc.org/HomePage_CleanUp/SpryAssets/working.css.
I have one remaining problem, and hope someone can help.
There are three states/images for the main menu tabs: normal state, hover state (when the cursor is over the tab), and visible state (when a submenu is open and the cursor is over a submenu item).
In OS10.6.4/Safari, it works correctly:
Normal state
Hover state
Visible state
In Windows XP/IE 6, the 3rd state works incorrectly -- the hover state doesn't get replaced by the visible state:
In OS10.6.4/Opera and OS10.6.4/Firefox, it also works incorrectly -- but this time the hover state gets replaced by the hover color, not the visible state image:
For reference, I've copied the CSS below.
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
float: right;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive {
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
background-color: #FDE9BB;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
left: auto;
/* Menu item containers are variable width according to submenu item text */
ul.MenuBarHorizontal ul li {
width: auto;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul {
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* No borders on all sides */
/* ul.MenuBarHorizontal ul
border: 1px solid #666666;
/* Menu items are a light colored block with no padding and no text decoration */
ul.MenuBarHorizontal a {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
white-space: nowrap;
text-decoration: none;
display: block;
cursor: pointer;
color: #000000;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 11px;
/* For setting the background color of the spry menu you need to edit the background in the CSS pane. Click on the spry menu bar and then open up the CSS pane. Window > CSS Styles. There's a few CSS items that set the background by default. The "a" item sets the background for the items that don't have a dropdown and the MenuBarItemSubmenu sets the background for the items that have a dropdown. You can set the background to an image just like you would any other element in your HTML. */
/* The following selectors define images for the (orange) normal state of tabs */
ul.MenuBarHorizontal a #AboutUs {
background-image: url(../img/DropDownMenu_aboutus.gif);
ul.MenuBarHorizontal a #Missions {
background-image: url(../img/DropDownMenu_missions.gif);
ul.MenuBarHorizontal a #Help {
background-image: url(../img/DropDownMenu_help.gif);
ul.MenuBarHorizontal a #NewsAndEvents {
background-image: url(../img/DropDownMenu_newsandevents.gif);
ul.MenuBarHorizontal a #Media {
background-image: url(../img/DropDownMenu_media.gif);
ul.MenuBarHorizontal a #PatientStories {
background-image: url(../img/DropDownMenu_patientstories.gif);
ul.MenuBarHorizontal a #ContactUs {
background-image: url(../img/DropDownMenu_contactus.gif);
/* The following selectors define images for the (bright) active state of tabs.*/
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #AboutUs, ul.MenuBarHorizontal a.MenuBarItemHover #AboutUs, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #AboutUs {
background-image: url(../img/DropDownMenu_aboutus_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #Missions, ul.MenuBarHorizontal a.MenuBarItemHover #Missions, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #Missions {
background-image: url(../img/DropDownMenu_missions_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #Help, ul.MenuBarHorizontal a.MenuBarItemHover #Help, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #Help {
background-image: url(../img/DropDownMenu_help_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #NewsAndEvents, ul.MenuBarHorizontal a.MenuBarItemHover #NewsAndEvents, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #NewsAndEvents {
background-image: url(../img/DropDownMenu_newsandevents_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #Media, ul.MenuBarHorizontal a.MenuBarItemHover #Media, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #Media {
background-image: url(../img/DropDownMenu_media_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #PatientStories, ul.MenuBarHorizontal a.MenuBarItemHover #PatientStories, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #PatientStories {
background-image: url(../img/DropDownMenu_patientstories_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #ContactUs, ul.MenuBarHorizontal a.MenuBarItemHover #ContactUs, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #ContactUs {
background-image: url(../img/DropDownMenu_contactus_vis.gif);
/* The following selectors define images for the (red) hover state of tabs.*/
ul.MenuBarHorizontal a:hover #AboutUs, ul.MenuBarHorizontal a:focus #AboutUs {
background-image: url(../img/DropDownMenu_aboutus_hover.gif);
ul.MenuBarHorizontal a:hover #Missions, ul.MenuBarHorizontal a:focus #Missions {
background-image: url(../img/DropDownMenu_missions_hover.gif);
ul.MenuBarHorizontal a:hover #Help, ul.MenuBarHorizontal a:focus #Help {
background-image: url(../img/DropDownMenu_help_hover.gif);
ul.MenuBarHorizontal a:hover #NewsAndEvents, ul.MenuBarHorizontal a:focus #NewsAndEvents {
background-image: url(../img/DropDownMenu_newsandevents_hover.gif);
ul.MenuBarHorizontal a:hover #Media, ul.MenuBarHorizontal a:focus #Media {
background-image: url(../img/DropDownMenu_media_hover.gif);
ul.MenuBarHorizontal a:hover #PatientStories, ul.MenuBarHorizontal a:focus #PatientStories {
background-image: url(../img/DropDownMenu_patientstories_hover.gif);
ul.MenuBarHorizontal a:hover #ContactUs, ul.MenuBarHorizontal a:focus #ContactUs {
background-image: url(../img/DropDownMenu_contactus_hover.gif);
/* Menu items that have mouse over or focus have a dark background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
background-color: #bf2e1a;
color: #FFFFFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a dark background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
background-color: #bf2e1a;
color: #FFFFFF;
/* Sets width of submenus and makes text non-wrapping */
ul.MenuBarHorizontal ul li {
display: block;
float: none;
width: 12em;
white-space: nowrap;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
/* background-image: url(SpryMenuBarDown.gif); */
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu {
/* background-image: url(SpryMenuBarRight.gif); */
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
/* background-image: url(SpryMenuBarDownHover.gif); */
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
/* background-image: url(SpryMenuBarRightHover.gif); */
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe {
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection {
ul.MenuBarHorizontal li.MenuBarItemIE {
display: inline;
/* f\loat: left;
background: #FFF; */

Background image covers layer background.....

How is this for simple?
http://www.animalcrackerspetsupply.com/BlankPage.html
What you are supposed to see, but are not seeing, is a "mango" colored box in the middle of the page. It shows up perfectly fine in Dreamweaver, but does not show up when I preview or upload it to any browser. I have done this previously with just a color on the page background instead of an image and it worked fine, (http://animalcrackerspetsupply.com/index.html) but I cannot make it work with this image as the background!
I have tried playing with z-index and visibility and nothing works. Other layers on the page show up just fine (ex: http:www.animalcrackerspetsupply.com/Index1.html).
What gives? I am using Dreamweaver 8 (because I can't afford CS5!!)
Thank you,
Kelly

It's there, just invisible because of no background color and no content.
You forgot the # sign in front of the background color in the css:
background-color: CC9966;
instad of:
background-color: #CC9966;

Using image as a background

Similar Messages

Maybe you are looking for