Adding video to a background image

Hello,
Having a bit of trouble here. I have Premiere Elements 10 and I am trying to figure something out.
I have a background image that I want to be able to add video into a small section of it, while the rest of the image is still there. The area is framed, so it would go into a specific area on the image.
It would kind of look like how most of your news shows look with the video over the person shoulder, just instead of it being a live person, it is just a still image that the video is in.
I have tried using the Green Screen Key and it will black out the green box, but it will not put the video in there. I have the video on Video 2 witht he image on Video 1. When I add the video into Video 2 it just overlays the entire thing and I cannot see any of the background image at all.
Any help would be appreciated.
If you need, I can provide a link to someone elses youtube video to show what it is I am trying to do.
Thanks,
Michael

Are you talking about a Picture-in-Picture effect -- with a person sitting at a news desk and a photo or video inset in the upper left or upper right of the screen?
Here's a tutorial -- but how you specifically do it depends on which version of the program you're using.
http://www.youtube.com/watch?v=mzYs-ifrHjU

Similar Messages

  • Adding Text To A Background Image

    Hi,
    I'm still very new to Dreamweaver, and would appreciate your insight. I've attached an image for reference. Green is for the banner/menu bar.
    In Photoshop, I sliced up a banner/background image combo, saved for web/devices, and imported it onto an html page in Dreamweaver. The bottom half was imported as a separate image. The code for which is:
    <tr>
         <td colspan="8"
                 <img src="image location" alt="" width="828" height="401"></td>
    </tr>
    Is there a way that I can add text to appear on top of the bottom half? Would I need to insert a div tag, or wrap that table row in one? Would it just be a matter of another table row, or an editable region?
    Thank you!

    Guild,
    Please do yourself a favor and DO NOT use APDivs for such a simple layout.
    See screenshot of an HTML page with Default CSS positioned layout and background-colors (no images needed).
    In Code View, copy and paste the following CSS and HTML code into a New blank HTML document.  You can edit colors in DW CSS properties panel.
    <!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>
    </head>
    <style type="text/css">
    body {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 100%;
    text-align:center;
    background: silver;
    #wrapper {
    width: 900px; /**adjust in px or %**/
    margin: 0 auto;
    #header {
    background-color: #009933;
    color: #FFF;
    color: #FFF;
    padding: 1em;
    #mainContent {
    background-color:#CC3366;
    text-align: left;
    line-height: 1.5;
    padding: 1em;
    #footer {
    background-color:#FFF;
    color:#666;
    font-size: 0.85em;
    margin: 0;
    padding: 6px;
    </style>
    <body>
    <div id="wrapper">
    <div id="header">
    <h1>H1 heading goes here</h1>
    <h2>sub-heading here </h2>
    </div>  <!--end header -->
    <div id="mainContent">
    <h3>H3 heading goes here</h3>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at leo massa, a tempus nunc? Phasellus ante diam, sodales ac sagittis id, feugiat ut ligula. Mauris ac massa erat, vel mattis justo. Pellentesque pretium egestas lacinia. Aliquam a ipsum nunc. Mauris molestie enim lacus. Pellentesque elit arcu, rhoncus id viverra non, pellentesque quis libero. Curabitur sed elementum mi. Curabitur quam ligula, ullamcorper facilisis mattis non, malesuada tempus nulla! In ac nisi in metus venenatis sollicitudin ut at leo. Mauris nec diam justo. Nulla venenatis posuere mollis. Praesent tincidunt magna eu ipsum mollis sed gravida ante placerat. Praesent fringilla placerat quam? Nulla et nisi libero. Aenean a egestas lectus. </p>
    <p>Quisque ut lacus nec augue convallis ultricies. Aliquam mollis dignissim feugiat. Vestibulum justo ipsum, dignissim quis scelerisque eget, cursus a magna. Curabitur laoreet ipsum at tellus tincidunt nec vulputate risus commodo. Suspendisse scelerisque sem nisl. Ut vitae mauris ac nibh scelerisque dictum. Etiam fringilla ligula consequat nibh rhoncus id semper dui fringilla? Nullam vitae ante odio, non venenatis arcu. In ac euismod dolor. Nulla facilisi. In mi sapien, sollicitudin eget imperdiet sed; rutrum sit amet lectus! Maecenas ut tellus risus. Mauris nec semper dui. Praesent mattis iaculis iaculis. Mauris fringilla lacus eget orci mollis id imperdiet arcu accumsan!
    </p>
    </div>  <!--end mainContent -->
    <div id="footer">
    <p>some footer text goes here</p>
    </div>   <!--end footer -->
    </div>   <!--end wrapper -->
    </body>  <!--end body -->
    </html>  <!--end document -->
    Good luck,
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • Compressing video for website background images

    I'm building a website and hoping to have a web video play underneath a screen on the home page. The sample 11 second file on our template is an mp4 file at 1280 by 720, but it's onlye 340KB. Using media encoder I was only able to compress our 15 second clip in an mp4 format to a whopping 18 megabytes. Clearly I'm setting something improperly. I encoded using the Vimeo setting. How can I use media encoder to create such a small video file? Thanks.

    Found one way to reduce the 18 mb file to 3 mb. I imported the MP4 into Photoshop then exported to Adobe Media Encoder at "low resolution." I couldn't find comparable settings in Adobe Media Encoder through the direct interface, so this means it must be possible to compress farther with this tool. Any additional ideas/suggestions? Thanks.

  • 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

  • Adding .flv or .swf in dreamweaver on top of background image

    Hi,
    I added an image  background 1900 x 1200 in dreamweaver, which will serve as my  background image for my web site. I would like to incorporate my .flv or  .swf on top of my background image. Although, when doing so, the .flv  or .swf gets placed under the background image and not on top. How do I  place the .flv or .swf file on top of my background image in Dreamweaver  CS5.
    Thanks

    Hi
    This sounds as though you are not actually using a  background-image but just placing an image on the page. To get any help  people will have to see your page and the code, can you provide a link  to a live page?
    BTW: Your background-image size is way to big for most users monitors, just thought you should know.
    PZ

  • Adding background image to navigation tabs

    I am adding a backgraound image to a navigation tab and so far have found the only way to do this is by modifying the HTMLTableCell class and adding a method that sets the background image. The closest existing method is setBgColor - which doesn't work.
    I'm sure there has to be a better way to do this?
    Thanks

    My favorite technique is to use CSS. Try this in a stylesheet:
    BODY { background-image: url(marble.gif);           background-color: #cccccc; } P { background-image: none;           background-color: #cccccc; }
    For more information visit http://css.nu/.
    You can apply that style to a <DIV> you use to bound your header, for instance.
    David Phipps
    Plumtree Software

  • Background image when recording video on iphone like in photobooth?

    Is there an app that places a background image when video recording like in photobooth?

    Thanks for your reply . I've removed the cover when doing both tests I mentioned. The earphone I used is at good condition and I don't see any problem with it. I've also reinstalled the iOS as your instruction, but still no luck, the video sound still has noise.
    I've decided to export the video file to my PC to see if I can hear sound better or not, as it's hard to hear and sound except noise with the external speaker on my iPhone even at maximum volume. On my PC I had to increased playback volume to 100%, set volume booster to 300% and applied noise reduction plugin (I use Media Player Classic on Windows 7) to get an acceptable sound (still noise but better than the original). If I don't boost the volume, it's hard to hear anything. I don't expect it to be crystal clear like the voice memo (using the bottom mic), but too much noise like this is really bad.
    So I think it appears to be a hardware-related problem. I will later consider to send it to a phone repair shop or keep it and accept this bad video sound problem . In Vietnam we just have Apple authorized resellers but don't have any official Apple repair shops, that's why I'm still confused as I don't really trust those phone repair shops to handle my iPhone. Anyway, thanks again for your comment .
    P.S: it maybe a little off-topic, but do you know any video recording app that using the bottom mic ?

  • Adding background image to Spry Menu Bar?

    Hi Everyone,
    I have a question concerning adding a background image to a horizontal spry menu.
    1) I am using Dreamweaver CS4.
    2) I am inserting this menu bar on a HTML document.
    3) I have created and am using an external style sheet (CSS)
    I am not sure on which style(s) ("ul.*) to edit in order to acheive this.
    I have a total of four(4) different images I would like to use, they are...
    1) Horizontal Menu Bar (main menu bar)
    2) Horizontal Menu Bar - Rollover
    3) Submenu
    4) Submenu - Rollover
    Also I would like the text to be centered on the button.
    I have somewhat acheived this using the instructions for "customize this widget", yet the image "repeats" because the button is larger than the image.
    I have not tried to center the text, this may be a very simple thing, if so just let me know.
    What I dont know, and was hoping someone could tell me, is which style(s) ("ul.*) to edit in order to acheive this.
    If anyone needs anymore information, just let me know and I will give it to you as soon as possible.
    Also I have attached three(3) of the four(4) pictures I would like to use. (this is the maximum)
    Any help will be greatly appreciated,
    Musicman1994

    I'd like to thank everyone with their help so far, but I am still having trouble.
    I have tried both suggestions and the results are...
    The one suggested by dhvani2511 gave me this...
    (The cursur is over "Item 1" it is not blue when a cursur is not over it.)
    I would like the image to "be" the button, not just "in" it,if that makes sense.
    I have slightly tried the one suggested by .V1 but being that I am new to dreamweaver, code, etc. I am not sure where to copy/paste the code that you gave me.
    Does anyone have anymore information?
    Thanks,
    Musicman1994

  • Adding a panel to an open GUI with a background image

    Dear java programmers,
    I want to add a JPanel with some components on an open(visible) GUI whenever a button is clicked. That JPanel carries a button, a progress bar, a label, and a textarea inside a scrollpane. Whenever the button of the panel is clicked a program starts working, and the progress and output of that program is reflected on the progress bar and textfield respectively. I 'put the code to generate and add the panel in a so called "Progress" class, which is different from the GUI class that contains the code to create and display the main gui.
    My gui also has a background image to make is look fancy, which is added by the following way:
    GUI mygui = new GUI();
    mygui.getContentPane().add(new ImagePanel(new ImageIcon("/home/thomas/Documents/external_placement/Report/presentation4_transp.png").getImage()));
    My problem is that the background image is hiding the panel (whenever added) and only when the cursor passes above the button inside the panel it becomes visible (just the button). However when I click the button and the program starts I can see everything inside the panel.
    Is there an efficient way of making the panel visible at once?
    thanks in advance,
    Tom

    Ok now that I'm certain about how to use code tags I'll try to make myself clear.
    First of all I made it work by removing the ImagePanel , adding the JPanel and re-adding ImagePanel, all from within the Progress.class. But I'm not sure if this is the right way.
    Below I'll make an attempt to provide some SSCCE--code. First of all the classes I'm using are 2, the GUI.class which contains all the components of the gui, and the Progress.class which has the additional panel and adds it to the gui whenever the "submit" button is clicked.
    The code from GUI.class which is relevant to this question is:
    public class GUI extends javax.swing.JFrame{
    //the following are declared as "protected" because they are also used elsewhere
                protected static GUI mygui = new GUI();
                protected static ImagePanel backgroundImagePanel = new ImagePanel(new ImageIcon("/home/thomas/Documents/external_placement/Report/presentation4_transp.png").getImage());
                /* The constructor */
                public GUI() {
            initComponents(); //this method initializes all the components, puts the in a JTabbedPane and packs them the JFrame
            setLayout(new BorderLayout());
        /* the eventlistener of the "submit" button */
        private void submitButtonActionPerformed(java.awt.event.ActionEvent evt) {
            ProgressBarTest pbt = new ProgressBarTest(mygui);
            pbt.StartProgress();
        public static void main(String args[]) {
            java.awt.EventQueue.invokeLater(new Runnable() {
                public void run() {
                    mygui.getContentPane().add(backgroundImagePanel);
                    mygui.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                    mygui.pack();
                    mygui.setVisible(true);
    } And then I have my Progress.class:
    public class Progress implements ActionListener, Runnable {
    //the following are declared as "private" because they are also used elsewhere inside the class
        private static javax.swing.JProgressBar progressBar = new JProgressBar(0, 100);
        private static javax.swing.JTextArea progressTextArea = new javax.swing.JTextArea(5,20);
        private static ProgressBarTest _this;
        {color:#0000ff}private static GUI mygui;{color}
        /* the constructor */
        public Progress(GUI gui){
            _this = this;
            {color:#0000ff}mygui = gui;{color}
        private static void createAndShowPanel(){
            javax.swing.JScrollPane progressScrollPane = new JScrollPane(progressTextArea);
            javax.swing.JLabel progressLabel = new JLabel("Progress");
            javax.swing.JButton progressButton = new JButton("Do something");
            progressButton.addActionListener(_this);
            javax.swing.JPanel progressPanel = new JPanel();
            javax.swing.GroupLayout progressPanelLayout = new javax.swing.GroupLayout(progressPanel);
            progressPanel.setLayout(progressPanelLayout);
            progressPanelLayout.setAutoCreateGaps(true);
            progressPanelLayout.setAutoCreateContainerGaps(true);
            progressPanelLayout.setHorizontalGroup(
                    progressPanelLayout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                    .addGroup(progressPanelLayout.createSequentialGroup()
                    .addContainerGap()
                    .addGroup(progressPanelLayout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                    .addComponent(progressScrollPane, javax.swing.GroupLayout.DEFAULT_SIZE, 872, Short.MAX_VALUE)
                    .addComponent(progressBar, javax.swing.GroupLayout.DEFAULT_SIZE, 872, Short.MAX_VALUE)
                    .addComponent(progressLabel)
                    .addComponent(progressButton, javax.swing.GroupLayout.Alignment.TRAILING))
                    .addContainerGap())
            progressPanelLayout.setVerticalGroup(
                    progressPanelLayout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                    .addGroup(javax.swing.GroupLayout.Alignment.TRAILING, progressPanelLayout.createSequentialGroup()
                    .addContainerGap(25, Short.MAX_VALUE)
                    .addComponent(progressButton)
                    .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                    .addComponent(progressLabel)
                    .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                    .addComponent(progressBar, javax.swing.GroupLayout.PREFERRED_SIZE, 33, javax.swing.GroupLayout.PREFERRED_SIZE)
                    .addGap(19, 19, 19)
                    .addComponent(progressScrollPane, javax.swing.GroupLayout.PREFERRED_SIZE, 161, javax.swing.GroupLayout.PREFERRED_SIZE)
                    .addContainerGap())
            javax.swing.GroupLayout layout = new javax.swing.GroupLayout({color:#0000ff}mygui.getContentPane(){color});
            {color:#0000ff}mygui.getContentPane().setLayout(layout);{color}
            layout.setHorizontalGroup(
                    layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                    .addGroup(layout.createSequentialGroup()
                    .addContainerGap()
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                    .addComponent(progressPanel, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)
                    .addComponent{color:#0000ff}(mygui.jTabbedPane1{color}, javax.swing.GroupLayout.PREFERRED_SIZE, 496, javax.swing.GroupLayout.PREFERRED_SIZE))
                    .addContainerGap(100, Short.MAX_VALUE))
            layout.setVerticalGroup(
                    layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                    .addGroup(layout.createSequentialGroup()
                    .addContainerGap()
                    .addComponent({color:#0000ff}mygui.jTabbedPane1{color}, javax.swing.GroupLayout.PREFERRED_SIZE, 362, javax.swing.GroupLayout.PREFERRED_SIZE)
                    .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                    .addComponent(progressPanel, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
                    .addContainerGap())
           {color:#0000ff} mygui.getContentPane().remove(mygui.backgroundImagePanel);
            mygui.getContentPane().add(progressPanel, BorderLayout.SOUTH);
            mygui.getContentPane().add(mygui.backgroundImagePanel);
            mygui.pack();{color}
        public static void StartProgress(){
            ProgressBarTest t = new ProgressBarTest({color:#0000ff}mygui{color});
            new Thread(t).start();
            javax.swing.SwingUtilities.invokeLater(new Runnable() {
                public void run() {
                    createAndShowPanel();
        public void actionPerformed(ActionEvent ae){
    // signal the worker thread to get crackin
            synchronized(this){notifyAll();}
    // worker thread
        public void run(){
            while(true){
    // wait for the signal from the GUI
                try{synchronized(this){wait();}} catch (InterruptedException e){}
                Dock dock = new Dock();
                int chainArrayLength = dock.PrepareDockEnvironment();
    // start a long-running process -this is a task performed by "Dock.class"
                for (int i = 0; i <= 100; i++){
                    progressBar.setValue(i*100/chainArrayLength);
                    progressTextArea.append("Docking chain No "i".\n");
                    System.out.println("actionPerformed sets progressBar value to: "+i);
                    dock.StartDocking(i);
    }Please notice how I use the GUI object (named "mygui") inside the Progress.class to retrieve components from the main gui (particularly the jTabbedPane1), align them with the additional panel (progressPanel) and add them to the main gui again. I tried to color blue the lines where the GUI instance is used but I'm not sure if they will be visible.
    My questions are:
    1. Is this the right way to add a new panel to a jFrame from an external class? Do I add jTabedPane twice in the above code?
    2. Is this the most efficient way of making the additional panel visible at once, meaning by removing the ImagePanel (backgroundImagePanel) adding the panel (progressPanel) and finally adding again the ImagePanel (backgroundImagePanel)?
    Hope I was perspicuous.
    Tom

  • Adding background image to JFrame

    This is the code I have now. I want to add a background image to the JFrame, and it needs to be where i type the file name of the image into the program code and it loads it from my computer.
    import javax.swing.*;
    import java.awt.*;
    import java.awt.event.*;
    class GUIFrame extends JFrame implements ActionListener, KeyListener
         Display myDisplay;
         Button guess;
         Button solve;
         TextField input;
         JTextArea guessedLetters;
         MenuBar myBar;
         Menu fileMenu;
         MenuItem fileNewGame;
         MenuItem fileQuit;
         * constructor sets title of GUI window
         GUIFrame()
              super("Hangman");
              setSize(1000,600);
              guess = new Button("Guess");     
              guess.setFocusable(false);
              solve = new Button("Solve");     
              solve.setFocusable(false);
              input = new TextField(20);
              guessedLetters=new JTextArea(10,10);
              guessedLetters.setEditable(false);
              myBar=new MenuBar();
              fileMenu=new Menu("File");
              fileNewGame=new MenuItem("New Game");
              fileQuit=new MenuItem("Quit");
              myDisplay = new Display();     //make an instance of the window
              setLayout(new FlowLayout());     //How things are added to our Frame
              add(myDisplay);
              add(guess);
              add(solve);
              add(input);
              add(guessedLetters);
              setMenuBar(myBar);
              myBar.add(fileMenu);
              fileMenu.add(fileNewGame);
              fileMenu.add(fileQuit);
              addKeyListener(this);
              guess.addActionListener(this);
              solve.addActionListener(this);
              setVisible(true);     //make the frame visible
         * exectues when user presses a button.
         public void actionPerformed(ActionEvent e)
         public void keyPressed(KeyEvent e)
         public void keyReleased(KeyEvent e)
         public void keyTyped(KeyEvent e)
    }

    Look in the API under JFileChooser and Scanner to see how to get the file name. One you have it, you can load the file easily using several different methods...
    This is even easier, you can paint and image onto anything you like with this method:
    g.drawImage(image, 0, 0, null); //where g is the graphics context from the object you want to paint.
    Simple as that.
    The biggest problem you'll have with painting images onto other objects is making sure the image is loaded before you try to draw it; use ImageIO to load or add your image to a MediaTrakker after your load statement like this:
    Image im = (Image)ImageIO.read(new File("c:/myImages/myImage.jgp"));
    or
    BufferedImage bi = ImageIO.read(new File("c:/myImages/myImage.jgp"));
    or
    Image image = Toolkit.getDefaultToolkit().getImage("c:/myImages/myImage.jgp");
    MediaTracker mediaTracker = new MediaTracker(jf);
    mediaTracker.addImage(image, 0);
    mediaTracker.waitForID(0);
    BTW: what this means it that you can paint right onto the graphics content of the JFrame and not have to worry about any other containers if you want.
    If you expect the image to last more than just a flash, then you also need to override your paintComponents(Grahics) method to paint your graphics to your screen.

  • Adding background image to portlet title bar

    Hi,
    Does anyone know how to add a background image to a portlet title bar. I have tried using the LAF editor but nothing seems to work. The image will be static and not change.
    Any help appreciated.

    Hi Chris
    You have to modify the .css file depending on the type of Skin you are using like "default" or "bighorn" in case of 10.x and 9.x etc. Best thing is to install Firebug for Firefox and inspect the Titlebar in firebug. That should tell exactly which .css file and which element in that .css file is used to render the Portlet Title bar.
    For "default" skin, the file is window.css and the element in this file is ".bea-portal-window-titlebar" with background-color: #XXXXXX. Replace this or add another field like background-image: url(your image path). This window.css file can be found under WebContent\framework\skins\default\css\window.css. Remember that in 9.x and 10.x to see this file from Workshop IDE, you need to switch view to Merged Projects and select this file and copy this to your project to view it. BUT, I would not recommend to modify any out of box .css file. Instead create a new file custom.css file and add entries in this file which you want to overwrite. This is the standard way to customize any out of box skins look and feel. So in your custom.css file your will have one entry like this:
    .bea-portal-window-titlebar {
    background-image: url(your image path)
    For "bighorn" skin introduced in 9.x and 10.x, the elements in .css files are slighty different but the concept is same. I customized out of box bighorn skin to change background color of portlet title bar. The .css location for portlet title bar for bighorn skin is: WebContent\framework\skins\bighorn\css\colors.css and the element is ".wlp-bighorn-titlebar". For quick testing from Firebug, inspect this element and change the background color to something else and see if it reflects in Firefox. Then you can create custom.css file under same folder structure in your portal web project and over write this element and this field alone with the background-image that you want something like:
    .wlp-bighorn-titlebar {
    background-color:#FF0000;
    background-image:url(your image path);
    It is highly recommended to have all customizations go into custom.css file only. Please make sure that you have this custom.css file entry in the skin.xml file (in case of bighorn) or skin.properties file (in case of old legacy default skin). This .xml or .properties file can be found under same folder structure like: WebContent\framework\skins\yourSkin. For new bighorn skin.xml file this custom.css file entry is already there. But for old legacy default skin you may need to add this entry.
    HTH
    Ravi Jegga

  • Adding A Separate Background Image For Each Menu Item

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

    Did an Adobe Tutorial for creating/entering a Spry Menu Bar. This is the HTML, after I took out the submenus.
    <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="news.html">Features</a></li>
          <li><a href="news.html">News</a></li>
          <li><a href="news.html">Fashion</a></li>
          <li><a href="news.html">Lifestyle</a></li>
          <li><a href="news.html">Calendar</a></li>
        </ul>
    This is from the SpryMenuBarHorizontal.css (It seems like I need to make changes in the Design Info section of this code. But nothing I've tried has worked):
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    text-transform: uppercase;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 7em;
    float: left;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 8.2em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #EEE;
    color: #333;
    text-decoration: none;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #33C;
    color: #FFF;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #33C;
    color: #FFF;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;

  • Adding a background image in php

    Hey guys, i have a php file on which i need to add a background image to better coordinate my website and i can´t remember the code and where it goes. Could someone help ?
    thanks guys.

    I think the two links from w3schools should show you.  Or go to any straightforward web page and use your browser to view source and take a look at someone elses page.  Or get to grips with a Firefox plug-in called Firebug.  Or just read any basic CSS tutorial.
    If you can post a link to your page it will be easy for someone here to show you but in my opinion, this is one you ought to work out for yourself.  A consistant piece of advice regularly given here by the experts is to learn HTML and CSS if you want to get to grips with DW.
    Having said that, DW will hold your hand a little if you use it's tools for writing CSS.  http://www.adobe.com/devnet/dreamweaver/css.html
    martin

  • Adding background image in JavaFX

    I am using javafx integrated with jswing.How to add a backgroung image to gridpane layout in javafx?The image must be resizable on maximizing the frame.Please help.
    Edited by: EJP on 17/02/2012 17:50: fixed your title. No shouting here thanks.

    Is jswing shorthand for Java Swing?
    Anyways, I would recommend looking at the [url http://docs.oracle.com/javafx/2.0/api/javafx/scene/doc-files/cssref.html#pane]CSS reference and the -fx-background-image property in particular. Detailed appearance changes to JavaFX controls are mostly configured by CSS.

  • Adding Background Image

    Can someone help me figure out how to add an image in a Pages 09 file to be used as a background image?
    Coming from Word I could put an image in a document and then type over it, format it, etc.
    Can this be done in Pages 09?
    Thanks!

    scpk2000 wrote:
    I have managed to create the background I want text that reads, "Copy Do Not Replicate", but now I need to know how to replicate or copy that through out the document. I am doing it manually at the moment, but it's a 353 document.
    See "Letterhead and Follower Sets":
    http://www.freeforum101.com/iworktipsntrick/viewtopic.php?t=182&mforum=iworktips ntrick
    Follow the instructions for moving your image to a Section Master and then capturing the page.
    Btw, I did not see where I can post a new message on here? When I went to help it said to reply to a reply similar to mine? I don't know.
    Under *Forum : Pages '09*
    Click on *Post New Topic*
    Peter

Maybe you are looking for