Display a background image

I want to display an image into a panel and then add this panel to a frame. I used the following code but I don't know why the image doesn't appear.
Test.java :
public class Test {
private JFrame framePrincipal;
private JPanel panel;
private Toolkit toolkit = Toolkit.getDefaultToolkit();
private Image image = toolkit.getImage ("C:/ProGolf/Images/image.jpg");
public Test (){
     panel = new JPanel();
     framePrincipal=new JFrame("Club de Golf Joliette");
     framePrincipal.setBackground(new Color(185,211,238));
     ImagePanel imagePanel = new ImagePanel(image);
     panel.add(imagePanel,BorderLayout.CENTER);
     framePrincipal.setContentPane(panel);
     framePrincipal.setSize(new Dimension(650,200));
     framePrincipal.setVisible(true);
public static void main (String [] args){
     Test monTest = new Test();
ImagePanel.java :
public class ImagePanel extends JPanel {
Image image;
public ImagePanel(Image image) {
this.image = image;
public void paintComponent(Graphics g) {
super.paintComponent(g); //paint background
//Draw image at its natural size first.
g.drawImage(image, 0, 0, this); //85x62 image

Simpler than that;-import java.awt.*;
import javax.swing.*;
public class JFrameImage extends JFrame {
  public JFrameImage() {
      super("Images on a JFrame");
      Container c    = getContentPane();
      JPanel panel = new JPanel(){
             public void paintComponent(Graphics g)     {
                  ImageIcon img = new ImageIcon("myImg.jpg");
                  g.drawImage(img.getImage(), 0, 0, null);
                  super.paintComponent(g);
        panel.setOpaque(false);
      c.add(panel);
  public static void main(String[] args) {
    JFrameImage frame = new JFrameImage();
    frame.setDefaultCloseOperation( EXIT_ON_CLOSE );
    frame.setVisible(true);
// and here we have stretch to fit too!
      JPanel panel = new JPanel(){
             public void paintComponent(Graphics g)     {
                  ImageIcon img = new ImageIcon("myImg.jpg");
            ImageIcon bigImage = new ImageIcon(img.getImage().getScaledInstance
                               (getWidth(), getHeight(),Image.SCALE_REPLICATE));
            g.drawImage(bigImage.getImage(), 0, 0, this);
                  super.paintComponent(g);
        panel.setOpaque(false);
// and finally tiling
         JPanel panel = new JPanel(){
                public void paintComponent(Graphics g)     {
                  ImageIcon img = new ImageIcon("smallImage.jpg");
            int x = img.getImage().getWidth(this);
            int y = img.getImage().getHeight(this);
               for (int tileY = 0; tileY < getWidth(); tileY += y)
               for (int tileX = 0; tileX < getHeight();tileX += x)
               g.drawImage(img.getImage(), tileX, tileY, this);    
                   super.paintComponent(g);
        panel.setOpaque(false);

Similar Messages

  • Why aren't my CSS and div tag boxes displaying the background images I'm plugging in?

    I'm using the CSS dialog boxes to places images via the background image option into my dreamweaver site. Everything looks fine in dreamweaver but when I view it any of the browsers, two of the images I've place as div tag background images don't work....the overal background image of the site works, but these don't show up ....
    here's my code if it helps to answer
    <!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=UTF-8" />
    <title>Main</title>
    <style type="text/css">
    body {
    background-image: url(images/realgrade.jpg);
    background-repeat: repeat-x;
    text-align: center;
    html, body {
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-top: 0px;
    padding-top: 25px;
    #wrapper {
    width: 930px;
    text-align: left;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
    background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/possible%20image. jpg);
    background-repeat: no-repeat;
    #header {
    height: 192px;
    width: 237px;
    background-image: url(images/logo_fill.jpg);
    background-repeat: no-repeat;
    position: absolute;
    left: 35px;
    top: -25px;
    #mainNav {
    background-color: #33F;
    height: 200px;
    width: 272px;
    float: left;
    margin-top: 233px;
    #maincontent {
    height: 600px;
    width: 608px;
    float: right;
    margin-bottom: 45px;
    padding-right: 25px;
    background-repeat: no-repeat;
    background-position: center 270px;
    background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/opaqueMaincontent .png);
    #sidebar {
    background-color: #F36;
    height: 250px;
    width: 272px;
    clear: left;
    float: left;
    #footer {
    height: 525px;
    width: 870px;
    clear: both;
    padding-top: 45px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    background-image: url(images/footer_image.jpg);
    background-repeat: no-repeat;
    margin-top: 45px;
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="header">
        <p> </p>
        <p> </p>
        <p> </p>
      </div>
      <div id="mainNav">
    <p> </p>
    </div>
      <div id="maincontent"></div>
      <div id="sidebar"></div>
      <div id="footer"></div>
    </div>
    </body>
    </html>
    here's what I'm going for
    here's what I'm getting in the browser
    Please help!

    Your image files are pointing to your hard drive, not your server.  You have this
    background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/imag es/opaqueMaincontent.png);
    and you should have this
    background-image: url(imag es/opaqueMaincontent.png);
    Also, is your images file named imag es?
    Gary

  • Safari does not display my background-image from my CSS

    I am creating a web site in which I want an image to be seen in the backgound with the text "floating" over it. The code is listed below.
    /* CSS Document */
    a{text-decoration:none}
    body {
    background-image:url(images3/greywolf1.jpg);
    background-attachment:fixed;
    background-position:top right;
    background-repeat:no-repeat;
    height:100%;
    The image can be seen in IE, Netscape and Firefox but not in Safari. Is there a trick to this for Safari or does Safari not support this?
    You can view the current page I am working on at:
    www.killeenisd.org/shoemakerhs/main.html
    Thanks for anyy help you can give me.
    qtmouser

    Thank you. Though there was a closing brace on the body message, I ended up retyping the entire script and it worked.

  • Spry tab menu background image is not displaying on remote server

    Hello All,
    I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
    Here is the link
    http://www.geftas.com/temaritestpage/about.html
    Also I am uploading Css and html code below
    Any help would be exteremely appreciated.
    Thanks
    <!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=utf8"/>
    <meta http-equiv="content-type" content="cache" />
    <meta http-equiv="robots" content="INDEX,FOLLOW"  />
    <meta http-equiv="keywords" content="Enter Keywords"/>
    <meta http-equiv="description" content="Description Here" />
    <title>TEMARI&CO. | Business Strategists</title>
    <link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
              <div id="header"></div>
      <div id="navigation">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="index.html">HOME</a></li>
          <li><a href="about.html" class="current">ABOUT</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
            <ul>
              <li><a href="#">Business Plan</a></li>
              <li><a href="#">Marketing Plan</a></li>
              <li><a href="#">Incorporation</a></li>
              <li><a href="#">Accounting System</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#">OUR PROCESS</a></li>
          <li><a href="#">CAREERS</a>      </li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
    <div class="shadow" id="content">
      <div id="TabbedPanels1" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">values</li>
          <li class="TabbedPanelsTab" tabindex="0">people</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
                    <div id="scrolltext">
                        <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
            </div>
          </div>
          <div class="TabbedPanelsContent">
                      <div id="scrolltext">
                        <h1>Heading1</h1>                 
            <p>Lorem n, </p>
                                <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet, , </p>
                               <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit a, </p>
                               <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet,  </p>   
            </div>
          </div>
        </div>
      </div>
    </div>
      <div id="footer">
    <div id="legal">
                          <ul>
                              <li>Copyright © 2012 Temari&Co</li>
                        <li>| Privacy Policy |</li>
                        <li>Terms of Use</li>
                    </ul>
        </div>
                <div id="socialmedia">
                          <ul>
                              <li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
                        <li><img src="images/gicongri.png" width="20"          height="20" alt="gicon"/></li>
                        <li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
                        <li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
                  </ul>
          </div>   
      </div><!-- end footer-->   
    </div><!-- end wrapper-->
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>
    </html>
    @charset "UTF-8";
    /* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab buttons
    * (left aligned) above the content panel.
    .TabbedPanels {
              overflow: hidden;
              margin: 0px;
              padding: 0px;
              clear: none;
              width: 100%;
              height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    .TabbedPanelsTabGroup {
              margin: 0px;
              padding: 0px;
    .TabbedPanelsTab {
              position: relative;
              float: left;
              background-color: #FFF;
              list-style: none;
              -moz-user-select: none;
              -khtml-user-select: none;
              cursor: pointer;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9pt;
              font-weight: normal;
              color: #666;
              height: 30px;
              width: 116px;
              text-transform: uppercase;
              text-align: center;
              line-height: 30px;
              margin: 0px;
              padding: 0px;
    .TabbedPanelsTabHover {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
    .TabbedPanelsTabSelected {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
              height: 30px;
              width: 116px;
    .TabbedPanelsTab a {
              color: black;
              text-decoration: none;
    .TabbedPanelsContentGroup {
              clear: both;
              background-color: #FFF;
              height: 100%;
              width: 824px;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9pt;
              color: #666;
              border-top-width: 1px;
              border-right-width: 1px;
              border-bottom-width: 1px;
              border-left-width: 1px;
              border-top-style: dotted;
              border-top-color: #CCC;
              border-right-color: #CCC;
              border-bottom-color: #CCC;
              border-left-color: #CCC;
    .TabbedPanelsContent {
              height: 100%;
              width: 100%;
              overflow:hidden;
    .TabbedPanelsContentVisible {
    .VTabbedPanels {
              overflow: hidden;
              zoom: 1;
    .VTabbedPanels .TabbedPanelsTabGroup {
              float: left;
              background-color: #EEE;
              position: relative;
    .VTabbedPanels .TabbedPanelsTab {
              float: none;
              margin: 0px;
              border-top: none;
              border-left: none;
              border-right: none;
    .VTabbedPanels .TabbedPanelsTabSelected {
              background-color: #EEE;
    .VTabbedPanels .TabbedPanelsContentGroup {
              clear: none;
    /* Styles for Printing */
    @media print {
    .TabbedPanels {
              overflow: visible !important;
    .TabbedPanelsContentGroup {
              display: block !important;
              overflow: visible !important;
              height: auto !important;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: 0px;
              margin-left: auto;
    .TabbedPanelsContent {
              clear:both !important;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: 0px;
              margin-left: auto;
              width: 744px;
    .TabbedPanelsTab {
               overflow: visible !important;
               display: block !important;
               clear:both !important;

    Assuming these are the images you're trying to display:
    .TabbedPanelsTabHover {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
    .TabbedPanelsTabSelected {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
              height: 30px;
              width: 116px;
    You have 2 root paths in your URL code. I think this is how your file structure looks like on your local computer. However, on a remote server, ../ by itself means you're pointing to the root folder of your website. Your URL linkage should be corrected based on the relativity and your background will work without a problem.

  • DW 8 not displaying background image in a tag

    Hi,
    New to DW 8.02 on a WinXP Pro machine. I'm finding that DW 8
    (and DW MX2004) will not display a background image inside an
    <a> tag. Attached is an example code. The page displays
    correctly in IE 6, FF 2, Opera 9, etc, etc. But in design mode in
    DW 8 I can't see the graphic at all.
    Is there a way to have DW display the graphic? Is this a bug
    in DW?
    Thanks,
    Doug

    It looks like a bug. I am checking....
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "PegasusT4" <[email protected]> wrote in
    message
    news:eil1b0$7al$[email protected]..
    > Here's the code to cut and paste into DW. I only have it
    on my dev server
    > as I
    > was just playing around with background images and ran
    into the problem.
    > Just
    > replace the mail.gif with a graphic of your choice. The
    problem is NOT on
    > the
    > server, it's with DW not showing the graphic.
    >
    > Thanks,
    >
    > Doug
    >
    >
    >
    >
    > <!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>Little George</title>
    >
    > <style type="text/css">
    > #legalstuff a {
    > background: url(images/email.gif) no-repeat left center;
    > padding-left: 20px;
    > margin-left: 10px;
    > height: 1%;
    > }
    > </style>
    > </head>
    > <body>
    > <div id="legalstuff">Copyright 2006,
    Littleman.com. <a href="mailto:
    > [email protected]">E-mail for more
    information</a>. </div>
    >
    > </body>
    > </html>
    >

  • Background image not display in applet?

    Hi all,
    I try to display a image to applet as demos of oracle forms (reusable_calendar) but it can not.
    I add this text (AliasMatch ^/forms90/images/(..*) "C:\Ora92DS/forms90/Images/$1") into forms90.conf where C:\Ora92DS/forms90/Images/ contents my background image.
    Then I modify background=backgrnd.gif the formsweb.cfg file but the applet also do not display the background image.
    I also check the registry.dat file with
    default.icons.iconpath=
    default.icons.iconextension=gif
    I am need your helps.
    Thanks

    Hi,
    add /forms90/images/ as the default.icons.iconpath= value
    Frank

  • How to specify relative path for background image  in xsl

    Hi,
    I am generating a PDF from Apcahe FOP. I have an xsl for that, in the xsl fo:block I am displaying a background image. When the image path is absolute like..C:\image\logo.png it works fine. But I want to have the image in my WebContent\images folder and my xsl file is in WebContent\xsls folder. So when I try giving the relative path as ../images/logo.png, the image is not displayed.
    Can anyone tell how to do this???
    Thanks,
    Sanjeev.

    I have a fo:block like this :
    <fo:block border-style="solid" border-width="0.2pt" text-align="left"
                             background-image="url('http://localhost:8080/Project/images/table_header_center.png')"
                             font-size="8pt" font-weight="bold" color="white" padding-top="1pt"
                             padding-bottom="1pt">
                             <xsl:value-of select="tr/td/span" />
                        </fo:block>In the above code you can see that the the background-image="url('http://localhost:8080/Project/images/table_header_center.png')"
    has been given as absolute. The images folder is in my WebContent directory. I want this path to be relative to the context of my application , something like background-image="url('../images/table_header_center.png')".
    Thanks.
    sanjeev.

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

  • Background image on Interactive report column

    Hi,
    I have had a request from a customer with regards to displaying a background image behind a column on an interactive report.
    The interactive report is used to show notes added for an individual in the application.
    They want to display a note image behind the text to make the note stand out better.
    Is it possible to add a background image to the each cell in the interactive report
    Thanks
    Kevin
    Edited by: Cod'ead on Nov 30, 2009 3:43 PM

    Take a look at this list of threads (You may find something that helps..) : Oracle Application Express (APEX)
    Thank you,
    Tony Miller
    Webster, TX

  • A a:link has background image

    I have a bkg img in my nav and bottom nav. (navBkg.jpg) These navs are styled very specifically for the nav and bottom Nav in my css.  However all the a links are displaying this background, rather than just the nav and bottom Nav.  You can see it in the lower box (Eva prim's Snack of the Week Club) where it says "...read more."
    http://carriecoren.com/test/Sept9
    here's the css:
    @charset "UTF-8";
    #column3 img {
              margin-left: 10px;
    @font-face
    font-family: myFirstFont;
    src: url(Gondola_SD.ttf); 
              margin:0;
              padding:0;
    a, a:link, a:hover {
                        background-image: url(../images/whtBkg.jpg);
    body {
              font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
              font-size: 14px;
              color: #222;
              line-height: 18px;
              margin-right: auto;
              margin-left: auto;
              text-align: left;
              background-image: url(../images/blue_bg_vert.jpg);
              background-repeat: repeat-x;
              background-color: #000;
    #container {
              width: 960px;
              margin-right: auto;
              margin-left: auto;
              margin-top: 0px;
              margin-bottom: 0px;
              text-align: left;
              background-color: #FFF;
              background-image: url(../images/containerBkg.jpg);
              background-repeat: repeat-y;
    #content  {
              width: 920px;
              padding-right: 20px;
              padding-left: 20px;
    #header {
              background-image: url(../images/header.jpg);
              background-repeat: no-repeat;
              padding: 0px;
              height: 280px;
              width: 960px;
              text-indent: -9999px;
              margin-top: 0px;
              margin-right: 0px;
              margin-bottom: 0px;
              margin-left: 0px;
    /* column 1 */
    #column1 {
              width: 590px;
              margin-top: 30px;
              margin-right: 0px;
              margin-bottom: 20px;
              margin-left: 10px;
              border: medium solid #888;
              background-image: url(../images/column1art.jpg);
              padding-bottom:50px;
              float: left;
    #column1  p{
              font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
              font-size: 14px;
              color: #222;
              line-height: 22px;
              padding-left: 253px;
              padding-right:10px;
              padding-bottom:10px;
    #column1  h1{
              font-weight:normal
              font-family: Gondola_SD.ttf;
              font-family: "Gondola SD", "Gondola SD - Swash";
              padding-top: 20px;
              padding-left: 240px;
              padding-bottom:10px;
              font-size: 20px;
              word-spacing: 95%;
              text-transform: uppercase;
              line-height: 30px;
              text-align: center;
    /* column 2 */
    #column2 {
              background-color: #FFF;
              padding: 0px;
              width: 250px;
              margin-top:30px;
              margin-right: 20px;
              margin-bottom: 0px;
              margin-left: 10px;
              float: right;
              padding: 0px;
    #column2 li {
              list-style-type: none;
              display: inline;
              padding: 0px;
              margin-top: 0px;
              margin-right: 8px;
              margin-bottom: 0px;
              margin-left: 0px;
    #column2 a, a:link {
              margin-top: 0;
              margin-right: 0px;
              margin-bottom: 0;
              margin-left: 0;
              padding-top: 0;
              padding-right: 0;
              padding-bottom: 0;
              padding-left: 0;
    /* column 3 */
    #column3 {
              width: 550px;
              margin-right: 0px;
              margin-bottom: 20px;
              margin-left: 10px;
              border: medium solid #888;
              padding: 20px;
              float: left;
              height: px;
              background-color: #FFF;
    #column3  p{
              font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
              font-size: 14px;
              color: #222;
              line-height: 22px;
    #column3  h2{
              font-weight:normal
              font-family: Gondola_SD.ttf;
              font-family: "Gondola SD", "Gondola SD - Swash";
              padding-bottom:10px;
              font-size: 16px;
              word-spacing: 95%;
              text-transform: uppercase;
              line-height: 30px;
              text-align: left;
    #column3  a, a:link{
              color: #33C;
              background-color: #FFF;
              background-repeat: no-repeat;
    #column3  a:hover{
              color: #33C;
              font-weight: bold;
    h1{
              padding-bottom:10px;
              font-weight:normal
              font-family: Gondola_SD.ttf;
              font-family: "Gondola SD", "Gondola SD - Swash";
              padding-top: 20px;
              font-size: 20px;
              word-spacing: 95%;
              text-transform: uppercase;
              line-height: 30px;
              text-align: center;
    /* the main nav */
    #nav {
              width: 960px;
              height: 35px;
              margin-bottom: 10px;
              padding-top: 5px;
              padding-right: 0px;
              padding-bottom: 0px;
              padding-left: 0px;
              text-align: center;
              font-size: 14px;
              line-height: 30px;
              font-family: "Gondola SD", "Gondola SD - Swash";
              border-top-width:thin;
              border-color:#000;
              background-image: url(../images/navBkg.jpg);
              background-repeat: repeat;
    #nav ul { /* this is the main nav list */
              list-style:none;
              margin-bottom:0px;
              width:100%;
              margin-top: 0px;
    #nav li {
              display: inline;
              background-image: url(../images/navBkg.jpg);
              background-repeat: repeat-x;
    #nav li a, a:link {
              padding-right:25px;
              padding-left:15px;
              text-decoration:none;
              background-image: url(../images/navBkg.jpg);
              background-repeat: repeat-x;
              vertical-align: bottom;
              width: 100%;
              padding-top: 0px;
              padding-bottom: 0px;
              margin-top: 0px;
    #nav li a:hover{
              background-image: url(../images/navBkgHover.png);
              background-repeat: repeat-x;
              padding-top: 6px;
              margin-top: 0px;
              width: 100%;
    /* bottom nav */
    #bottomNav {
              width: 960px;
              background-color: #003399;
              margin: 0px;
              padding-top: 0px;
              padding-bottom: 0px;
              border-top-width: 9px;
              border-top-style: solid;
              border-top-color: #000;
              text-align: center;
              background-image: url(../images/navBkg.jpg);
              background-repeat: repeat-x;
              float: left;
              height: 25px;
    #bottomNav ul {
              list-style:none;
              font-weight:bold;
              margin-bottom:0px;
              margin-top: 0px;
              padding-top: 0px;
              padding-bottom: 0px;
    #bottomNav li {
              margin-right:0px;
              position:relative;
              padding-right: 10px;
              padding-left: 10px;
              padding-top: 0px;
              padding-bottom: 0px;
              display: inline;
    #bottomNav a, a:link {
              margin-right:0px;
              padding-right: 10px;
              padding-left: 10px;
              padding-top: 7px;
              padding-bottom: 7px;
              display: inline;
              margin-top: 10px;
              margin-bottom: 0px;
              color: #DDD;
    #bottomNav a:hover {
              color:#DDD;
              background:#660000;
    #pinterest {
              width: 250px;
              margin-right: 0px;
              margin-bottom: 20px;
              margin-left: 0px;
    #twitter {
              background-color: #FFF;
              width: 250px;
              margin-right: 0px;
              margin-bottom: 20px;
              margin-left: 0px;
              height: 100%;
              margin-top: 15px;
    #social {
              width: 250px;
              height: 58px;
              background-color: #FFF;
    #copyright {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9px;
              line-height: 20px;
              color: #222;
              text-align: center;
              width: 100%;
              float: left;
    #contact {
              margin: 0px;
              height: 140px;
              width: 50px;
              padding-right: 10px;
              padding-left: 20px;
              border: thin solid #222;
              padding-top: 40px;
    .clear {
              width: 900px;
              color: #EEE;
              margin-top: 100px;
              margin-right: 0px;
              margin-bottom: 0px;
              margin-left: 0px;
              clear: both;
    #container #content #clear {
              width: 700px;

    OK, you didn't need to post your CSS here, it's available on the page.
    But I am confused. Perhaps I am misreading you here.
    You have your bottom nav and your top nav. Then you have your "read more" which is not nav-it's just a link. Doesn't have your nav background.
    When you set the rules for links for Column 3, you set the way the "read more" would work:
    #column3  a, a:link{
              color: #33C;
              background-color: #FFF;
              background-repeat: no-repeat;
    #column3  a:hover{
              color: #33C;
              font-weight: bold;
    So when you hover, it turns bold and maintains the same color. And the background for links in Column 3 is white, which is the background for column 3. Really not needed.
    Additionally, the W3C Validator is finding problems with your page. Please fix those, then get back to us.

  • How to use background image in ABAP -  webdynpro

    Hi,
    My requirement is like that.
    I want to display a background image. Over the background image i want to display my ALV list or report.
    How to display my personalized image in background.
    Please assist me....
    Thanks in Adv.

    hi ,
    this is not possible:
    refer these threads :
    Background Image
    I Assign Background Image to a Group (Ans by Thomas)
    Image as Background Image possible?
    as correctly pointed above and in this thread
    use your own stylesheets
    refer this thread for more  information on styles :
    EP 7 Portal stylesheet with WD ABAP
    to display image in the foreground :
    refer this WIKI
    https://wiki.sdn.sap.com/wiki/display/stage/DisplayEmployeeImageinABAPWebDynpro+Application
    regards,
    amit

  • Dynamically Calling Background Image instead of standard setting

    Hi all,
    There is a requirement that, based on some condition I have to display shaded background image, say 'zimage1' .so as a result it should print in all pages. If condition fails, we have to display other image, say 'zimage2' in background. If both fails, no need to display background image.
    If any body knew the solution please assist me in this regards.
    Thanks & Regards,
    Nagesh.

    Do any one knew how to set Dynamic Background (Watermark) Image instead of going for the standard setting in Page. (by selecting BACKGROUND PictureTab).
    I want to pass a variable kind of information to the following fields during runtime.
    ie.,
    Path: Page->Background Picture.
    Name: <Variable image name>
    Object: GRAPHICS
    ID: BMAP
    and other properties like Ouput Mode, Position..etc.
    That image should come at backgroudn for all the pages.
    Hope, you have understood the issue here.
    Please do update me with relevnat ideas, if any.
    Thanks & Regards,
    Nagesh.

  • Safari doens't show background Image when sliding page left

    I display a web page with a large-width photo (say 2000 pixels jpg file) & a repeat small background image in mobile Safari & the right part of photo is beyond the screen.
    I touch & slide the page left to see right part but found there's no background image below the right part but only white blank background.
    Does anyone know how to make Safari display the background image below the right part?

    I display a web page with a large-width photo (say 2000 pixels jpg file) & a repeat small background image
    Does this mean that the large photo IS the background and set to repeat via CSS or HTML? In this case Safari might cut off the image that is not within the viewable bounds of the web page for memory reasons. Just a thought.
    Jason

  • Random background-image with PHP

    I would like to have random images as background-images on a
    page. So I
    made a rotate.php ("SELECT picsid, picsurl FROM pics WHERE
    picsite =
    'home' ORDER BY MD5(RAND()) limit 1") with
    <img src="<?php echo $row_rsimages['picsurl']; ?>"
    alt="" />
    Then I put the following rule into the css-file:
    #pics {
    width: 400px;
    height: 200px;
    background-color: #fff;
    background-image: url(banner.php);
    background-repeat: no-repeat;
    background-position: top left;
    Finally I inserted a div called #pics on the index.php and
    previewed the
    page, and - you are right ;) - the images are not displayed.
    Where have I failed?
    Martin Lang

    Martin Lang wrote:
    > I would like to have random images as background-images
    on a page. So I
    > made a rotate.php
    > background-image: url(banner.php);
    > Where have I failed?
    In several places.
    1. Presumably banner.php is the page that you earlier refer
    to as
    rotate.php. The name should be the same.
    2. It looks as though you're trying to use an <img> tag
    to display a
    background image. That won't work.
    3. If you want banner.php to display an image, you need to
    send the
    correct MIME header and stream the image as a download.
    // code to select the image
    $filepath = '/home/mysite/htdocs/images/'; // path to image
    folder
    $image = $filepath.$row_rsimages['picsurl'];
    if (file_exists($image) && is_readable($image)) {
    $size = filesize($image);
    header('Content-type: image/jpeg');
    header('Content-length: '.$size);
    $file = @fopen($image, 'rb');
    if ($file) {
    fpassthru($file);
    It's actually a lot simpler to do everything in the same
    page.
    Put the recordset at the top of the page to select the random
    image.
    Then put the style block in the head of the document:
    <style type="text/css">
    #pics {
    width: 400px;
    height: 200px;
    background-color: #fff;
    background-image: url(<?php echo $row_rsimages['picsurl'];
    ?>);
    background-repeat: no-repeat;
    background-position: top left;
    </style>
    David Powers, Adobe Community Expert
    Author, "Foundation PHP for Dreamweaver 8" (friends of ED)
    Author, "PHP Solutions" (friends of ED)
    http://foundationphp.com/

  • Cant get a background image to repeat x

    Hi All
    I have designed a webpage (www.butlerpartnersandassociates.com.au). I would like the blue bar near the top which contains the spry menu bar to scroll across the entire page (#div). I have edited the css rule to enable repeat x but it doesnt repeat. Is anyone able to advise me what I m missing or doing wrong?
    thanks

    I have noticed that you have a style like this:
    #Div {
    width:1000px;
    padding-top:0px;
    height:45px;
    margin-left:0px;
    margin-top:0px;
    margin-bottom:0px;
    float:left;
    display:inline;
    background-image: url(images/bluebar.gif);
    background-repeat: repeat-x;
    background-position: center;
    Do you know the meaning of # (hash sign) in a style?  Have you created an ID called Div?  If so you should avoid it completely and if you want all your divs to have the same style then the correct way is to have just this (without the hash):
    Div {
    width:1000px;
    padding-top:0px;
    height:45px;
    margin-left:0px;
    margin-top:0px;
    margin-bottom:0px;
    float:left;
    display:inline;
    background-image: url(images/bluebar.gif);
    background-repeat: repeat-x;
    background-position: center;
    You should never have a hash infront of any HTML official tags.
    hth

Maybe you are looking for