Repeating background images in tables

I am working on a web page with a background image in a
table. I have also inserted a table inside this same table to
include some text. When I preview this in Netscape/Firefox and
increase the text size a couple of times from the browsers menu,
the table with the image starts repeating as the text increases in
size. I don't mind the text changes sizes, but is there a way to
stop the table from repeating the background image? This is a
problem since the repeating image looks terrible.

On that page, change this -
</head>
to this -
<style type="text/css">
table.special { background-repeat:no-repeat; }
</style>
</head>
and then change your table tag from this -
<table width="100%" height="606" border="0" align="center"
cellpadding="0"
cellspacing="0">
to this -
<table width="100%" border="0" align="center"
cellpadding="0"
cellspacing="0" class="special">
(there is no table height attribute - it's invalid HTML)
> b, be too small, dependent upon which browser they are
viewed in.
Impossible. A background image will not change size in
different browsers.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"chimesey" <[email protected]> wrote in
message
news:[email protected]...
>
quote:
Originally posted by:
Newsgroup User
> Use CSS -
>
> table { background-repeat:no-repeat; }
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
> ==================
>
> I am trying to do the same thing, and my bg images seem
to either
> a, repeat somewhat
> or
> b, be too small,
> dependent upon which browser they are viewed in.
>
> I will try to use the code suggested above, but where
exactly would I
> insert
> it?
> This is the code for the 'table within the table'...
>
> <table width="100%" height="606" border="0"
> align="center" cellpadding="0" cellspacing="0">
> <tr>
> <th width="35%" height="95"
> scope="col"><h1>ten</h1></th>
> <th width="26%"
scope="col"><h1>year</h1></th>
> <th width="39%"
scope="col"><h1>plan</h1></th>
> </tr>
> <tr>
> <td height="325"><table width="100%"
height="266"
> border="0" cellpadding="0" cellspacing="0">
> <tr>
> <th scope="col"> </th>
> <th background="../smiths.jpg"
> scope="col"> </th>
> <th scope="col"> </th>
> </tr>
> </table> <p> </p>
>
>
> Ta!
>

Similar Messages

  • Stop Background Image in Table from Repeating

    Since CS4 has unfortunately removed the button for Background Image for tables, I found a neat work-around on the internet:  select the cell, then open the Tag Inspector panel, select the Attributes button and Show list view, and click inside "background" and use the folder icon to navigate to the background image.  However, I can't stop the image from repeating.  I've tried everything I can think of.  Can anyone help me?  No code responses, please.  Thanks!

    monelleny wrote:
    Can anyone help me?
    Yes.
    No code responses, please.  Thanks!
    Well, in that case, the answer is no.
    Quite honestly, if you're capable of searching for an answer on the internet, and using the Tag Inspector to add a background image, you should be capable of following simple instructions to handle CSS.
    To add a non-repeating background image to a table cell (or any element, for that matter), you use CSS. Create a CSS class like this in the head of the page:
    <style type="text/css">
    .background {
      background-image: url(images/bg.jpg);
      background-repeat: no-repeat;
    </style>
    Select the table cell, and then choose background from the Class menu in the Property inspector.

  • How do I Customize RoboHelp 11 Responsive HTML5 to include repeating background image?

    Hello,
    How do I add a repeating background image (not logo) to the layout found in RoboHelp 11 Responsive HTML5?
    Is this something that has to be done inside of Dreamweaver?
    Where are the RoboHelp 11 Responsive HTML 5 default themes (skins) stored on the computer?
    I have seen the following files in RoboHelp 11 and would like to know if it is possible to edit
    these files? 
    Responsive_Layout.fpj
    C:\Program Files (x86)\Adobe\Adobe RoboHelp 11\RoboHTML\Samples\en_US\EmployeeCare2\EmployeeCare2Project\!ScreenLayout!\Responsive_La yout
    Glossary.slp
    Index.slp
    SearchResults.slp
    Table_of_Contents.slp
    Topic.slp
    C:\Program Files (x86)\Adobe\Adobe RoboHelp 11\RoboHTML\Samples\en_US\EmployeeCare2\EmployeeCare2Project\!ScreenLayout!\Responsive_La yout
    By default, there are two themes found in Responsive HTML 5.  They are:
    Theme1_Standard
    Theme2_Government
    Where are these themes located under RoboHelp 11?
    Thanks in advance for your response.
    James

    Post moved to HTML5 Layouts forum.
    See www.grainge.org for RoboHelp and Authoring tips
    @petergrainge

  • Repeating Background Image Download Question

    When you use a repeating background image does the browser
    only download it once and then repeat it on their computer?
    I wanted to use a gradient background image so I figure to
    cut down the dowload size I'd just take a 1 pixel wide slice and
    repeat it, does that work?

    It works perfectly, I use Photoshop to make gradients and
    then insert the psd onto a page, where you get a conversion dialog,
    i select 100 for the jpeg quality and uncheck the sharpen color
    edges checkbox, you can use gifs if you want, then in your
    stylesheet use background-repeat: repeat:x;
    or y if you want to have a right to left gradient.
    Look at this site i am working on, it uses alot of PS
    gradients, all with repeat-x
    http://plcstrings.com/

  • Best practice for Spark repeating background image in a SkinnableContainer?

    In my old Flex 3.5 code I would accomplish this by dropping an Image into a Canvas and hitting the Canvas with some css style stuff to get the repeat.  The Image tag had a source property that would take a web address so I could dynamically grab different images from the web based on some conditions.  Little bit more trouble with Flex 4.5 and Spark but I'm trying to get there.
    Here Adobe docs explain how to *embed* a background image:
    http://help.adobe.com/en_US/flex/using/WS422719A4-7849-4921-AF39-57FF567B483B.html#WS063B0 491-B7AB-4b00-A39F-E44310BCB0E0
    They use a BitmapFill object in the skin.
    <!-- background fill -->
        <s:Rect id="background" left="3" top="3" right="3" bottom="3" alpha=".25">
            <s:fill>
                <s:BitmapFill source="@Embed(source='../../assets/myImage.jpg')"/>
            </s:fill>
        </s:Rect>
    Problem is I need to do this without embedding the image.  In my old code I grabbed the image from web (set source property on Image tag to web address).  What's the best practice for achieving this with a skinnable container?  The BitmapFill object used above won't take a web address for a source.
    Thanks in advance.

    Use BitmapImage with a fillMode of repeat:
    <s:BitmapImage source="http://www.google.com/intl/en_com/images/srpr/logo2w.png" width="100%" height="100%" scaleMode="stretch" fillMode="repeat" />

  • Background Image In Table Cell

    I'm not sure what I'm doing wrong or missing here. This is the first time that I'm using an image as a background. I've made a table with a 100% width with 3 colums and 3 rows. The left and right table cells have been merged and the 3 middle rows are at a width of 938 pixels. I have cropped the images correctly. The right column lines up perfectly, but the left column does not line up like it's supposed to with the image. You can take a look at it by going to http://www.wattsconcepts.com/new
    Here is the code below if anyone wants to take a look at it. Any help in solving this is greatly appreciated. I am using Dreamweaver CS5.5
    Thank you for your time!
    <!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>Watts Concepts - Kentucky Web Design - Harrodsburg, Kentucky</title>
    <style type="text/css">
    body {
              margin-left: 0px;
              margin-top: 0px;
              margin-right: 0px;
              margin-bottom: 0px;
              background-color: #000;
              background-image: url();
    </style>
    </head>
    <body>
    <table width="100%" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td rowspan="3" align="left" valign="top" background="images/left-index.jpg"> </td>
        <td width="938" align="center" valign="top"><img src="images/logo-index.jpg" width="938" height="172" /></td>
        <td rowspan="3" align="left" valign="top" background="images/right-index.jpg"> </td>
      </tr>
      <tr>
        <td align="center" valign="top"><img src="images/eye-index.jpg" width="938" height="296" alt="Reach Your Audience Today" /></td>
      </tr>
      <tr>
        <td align="center" valign="top"><img src="images/test-index.jpg" width="938" height="197" /></td>
      </tr>
    </table>
    </body>
    </html>

    Your HTML code should ideally be as follows:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Watts Concepts - Kentucky Web Design - Harrodsburg, Kentucky</title>
    <style type="text/css">
    body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #000;
    </style>
    </head>
    <body>
    <table width="938px" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="938" align="center" valign="top"><img src="images/logo-index.jpg" width="938" height="172" /></td>
      </tr>
      <tr>
        <td align="center" valign="top"><img src="images/eye-index.jpg" width="938" height="296" alt="Reach Your Audience Today" /></td>
      </tr>
      <tr>
        <td align="center" valign="top"><img src="images/test-index.jpg" width="938" height="197" /></td>
      </tr>
    </table>
    </body>
    </html>
    Also, you don't need 3 columns for this website. 1 column and 3 rows should do. Also, never use 100% for <table> width. It's bad practice as you're making your site fluid which will render your site to malfunction on some browsers
    And you had the entire 3 sections as 1 image as your CSS body background-image. This is bad practice. Crop only what you want for each section, never give the entire merged site as 1 image.
    Try the code I've given you above and it should work perfect.
    A quick tip: Try learning and using DIV with pure CSS styling instead of tables. Tables are a thing of the past. You could just google it and you have tons of free resources on how to create a site using DIV. Also, there's a beautiful tutorial posted by one of our senior members here: http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt2.html that explains how to create HTML5 site with Pure CSS styling using DIV tags.
    Cheers,
    ST

  • Repeating Background Image

    Hey guys,
    I've been coding websites for like 4 years now and have used CSS styling long enough for it to effect the way my brain handles coding concepts. Anyway, I also happen to have a CS minor and have been playing with Java again lately. I was wondering if there is any way to make an image (ImageIcon or whatever) repeated for a background for like a JPanel or something. I imagine if there isn't any predefined function for that then it would require some spiffy paintComponent (or paint) code.
    But all i'm really trying to do is make a background that is a repeated image. Do i just need to make a really long (or wide) image and hope that the user doesn't exceed that dimension? or is there some way to make an image repeat as a background?
    Any help or direction would be greatly appreciated. Thanks in advance!

    Awesome,
    I've read into this some and looked at a few tutorials. This definitely looks like something I was looking for. Would this be your suggestion for a background (that's only repeated on the x-axis) of a list of JButtons.
    An good example of the effect i'm trying to get is in NetBeans (5.5). (according to default settings) Just under the list of files you're currently editing, there is a list of buttons ( "back", "forward", "find previous occurrence", "find selection", etc). This list of buttons (and it's background) is the effect that I'm going for.
    My plan (which is very VERY html-ish) was to have two border images (left and right) and then have the repeated background in the middle with the JButtons (and their transparent background) on top of the repeated background.
    It looks like it's definitely possible to use TexturePaint for this, but I just wanted to make sure that it was the suggested method. Thanks for your help, I really appreciate it.

  • Help with repeating background image

    At
    http://www.hammerstones.net/music1.htm,
    i've inserted an iframe that seems to prevent the right edge
    background image from displaying. You'll see, it's along the right
    margin on all pages EXCEPT this one. All help is welcome to achieve
    this look.
    Dave

    CSS Menu:
    a { text-decoration: none }
    a:link {
        color: #FFF;
        background: #666;
    a:visited { color: #999 }
    a:hover, a:active, a:focus {
        background: #333;
        text-decoration: underline;
        border-bottom:4px solid gold;
    /**horizontal navbar**/
    nav ul, nav li {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size:20px;
        font-weight:bold;
        text-align:center;
    nav li a {
        float: left;
        display:block;
        padding: 6px;
        line-height: 1.2em;
        width: 8em;
    HTML:
    <nav>
    <ul>
    <li><a href="#">Some link</a></li>
    <li><a href="#">Some link</a></li>
    <li><a href="#">Some link</a></li>
    </ul>
    </nav>
    What it looks like:
    Nancy O.

  • Inserting 2 background images in to you site

    I've seen many sites with more than 1 background images. How
    can I do that with Dreamweaver CS3?
    I am very curious and I need to know how to do that. I am a
    newbie. Please don't give me horrible instructions. If you could
    please just give me a link to a tutorial or if it is very simple
    just tell me how to do it =]

    Ok, try this, it will give you something to play with. Copy
    all of the code
    below between the *** and *** and paste it into a new html
    page.
    I did not make the top div 1000px wide, that would cause
    quite a few people
    to scroll left to right, but change it if you prefer. Your
    bottom div will
    grow in size depending on content.
    Now someone else may have a better suggestion for you, but
    this is one way
    you can do what you seem to want to do.
    <!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>Untitled Document</title>
    <style type="text/css">
    #topdiv {
    width:90%;
    margin:auto;
    min-height:800px;
    background-image:(right click your mouse, go to Code Hints |
    URL Browser,
    and find your bakcground image file);
    background-position:center;
    background-repeat:no-repeat;
    border:#000066 thin groove;
    background-color:#FFFFCC;
    #bottomdiv {
    width:90%;
    margin:auto;
    border:#3333FF thin groove;
    background-color:#33FF99;
    background-image:(right click your mouse, go to Code Hints |
    URL Browser,
    and find your background image file);
    </style>
    </head>
    <body>
    <div id="topdiv">put 1000 x 800 in the #topdiv css rule
    above in the head
    tag. You will need to put all of your content containers
    inside this div to
    keep bg image inplace.</div>
    <div id="bottomdiv">Put repeating image in #bottomdiv
    in the CSS rule in
    your head tag.. If you have content that is going to match up
    to content in
    the topdiv, you will need to keep same size &
    margins.</div>
    </body>
    </html>
    "Cyberhuntera" <[email protected]> wrote in
    message
    news:[email protected]...
    >I want a background design image(1000x800) center;top and
    a repeating
    > background image(5x5) wich is behind the background.
    >
    > I am novice still, but I want to learn everything about
    HTML.
    > For now I know basic HTML and CSS - almost nothing about
    it :(
    >

  • How do I change the background image for a single tab on the navigation bar

    I'm creating a movie website for TDKR and for the navigation bar, I intend to have a different character for each tab. However, I'm having trouble putting a single image each separate tab. Instead one image appears on each of the tabs. Here's an example of the source and CSS.
    <td width="200"><ul id="navigation"><br />
          <li><a href="../pages/index.html">Home</a></li><br />
          <li><a href="../pages/cast.html">Cast</a></li><br />
          <li><a href="../pages/pictures.html">Pictures</a></li><br />
          <li><a href="../pages/soundtrack.html">Music</a></li><br />
          <li><a href="../pages/interview.html">Interviews</a></li><br />
          <li><a href="../pages/links.html">Links</a></li><br />
        </ul>
        </td>
    #navigation {
              list-style-type: none;
              padding: 0px;
              margin: 0px;
    #navigation li {
              margin: 0px;
              padding: 0px;
              list-style-type: none
    #navigation li a:link, #navigation li a:visited {
              display: block;
              width: 200px;
              height: 100px;
              text-decoration: none;
              text-align: center;
              line-height: 100px;
              font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
              font-weight: bold;
              -webkit-transition: 1000ms ease;
              -moz-transition: 1000ms ease;
              -ms-transition: 1000ms ease;
              -o-transition: 1000ms ease;
              transition: 1000ms ease;
              color: #648AAE;
              background-repeat: no-repeat;
              background-image: url(../Images/gifs/Batman-still-2.gif);
              background-position: center bottom;
              text-transform: uppercase;
              letter-spacing: 0.79em;
              border-radius: 5px;
    #navigation li a:focus, #navigation li a:hover, #navigation li a:active {
              color: #000000;
              background-image: url(../Images/gifs/Batman-animation-2.gif);
              background-repeat: no-repeat;
              background-position: center bottom;
              background-color: #454545;
              border-radius: 25px;
    So, how do I put a single image on each tab (home, cast, pictures, etc). Thank you for your help in advance.

    Assign a class to the item and use CSS to apply an image as in
    <li><a href="../pages/index.html" class="home;">Home</a></li><br />
    <li><a href="../pages/cast.html">Cast</a></li><br />
    <li><a href="../pages/pictures.html">Pictures</a></li><br />
    <li><a href="../pages/soundtrack.html">Music</a></li><br />
    <li><a href="../pages/interview.html">Interviews</a></li><br />
    <li><a href="../pages/links.html">Links</a></li><br />
    and the CSS
    #navigation li a:link.home, #navigation li a:visited.home {
         background-image: url(../Images/gifs/Batman-still-2.gif);

  • Background images with spry "horizontal menu"

    hi again
    I am trying to work with the spry: "horizontal menu"
    I want to put some background images into the menu bar not into the submenu
    and that is the problem: the background images appears overall
    what can I do ?
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Unbenanntes Dokument</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    #container {
         margin-right: auto;
         margin-left: auto;
         width: 400px;
    -->
    </style>
    </head>
    <body>
    <div id="container">Raum für den Inhalt von  id "container"
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Element 1</a>  </li>
    <li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
        <ul>
          <li><a href="#" class="MenuBarHorizontal">heija</a>      </li>
          <li><a href="#">soso</a></li>
    </ul>
      </li>
      <li><a href="#">Element 4</a></li>
    </ul>
    <p>  </p>
    <p> </p>
    <p> </p>
    <p> </p>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>
    and css
    ul.MenuBarHorizontal
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 100%;
         cursor: default;
         width: auto;
    /* 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: center;
         cursor: pointer;
         width: 100px;
         float: left;
         height: 10px;
    /* 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: 100px;
         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: 100px;
         height: 30px;
    /* 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: #FEF3E4;
         padding: 0.5em 0.75em;
         color: #FFF;
         text-decoration: none;
         background-repeat: no-repeat;
         background-image: url(../rot.jpg);
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
         color: #FF0;
    /* 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: #FEF3E4;
         color: #FF0;
         background-image: url(../rot.jpg);
    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-color: #FEF3E4;
    /* 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-color: #0F9;
    /* 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-color: #FEF3E4;
         color: #FF0;
    /* 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-color: #F99;
    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;

    Complete page and css code below (scroll down)
    All you should be concerned with at this moment to get the background image to appear in the top level anchor is the css style below:
    /* 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-color: #000;
    background-image: url(../rot.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    I've added the background-postion because presumably you want it to appear flush left. This overides the out-of-the-box setting which positions it 95% far left.
    Here is the code and css:
    <!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>Untitled Document</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Unbenanntes Dokument</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <head>
    <style type="text/css">
    <!--
    #container {
         margin-right: auto;
         margin-left: auto;
         width: 400px;
    -->
    </style>
    <style>
    ul.MenuBarHorizontal
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 100%;
         cursor: default;
         width: auto;
    /* 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: center;
         cursor: pointer;
         width: 100px;
         float: left;
         height: 10px;
    /* 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: 100px;
         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: 100px;
         height: 30px;
    /* 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: #FEF3E4;
         padding: 0.5em 0.75em;
         color: #FFF;
         text-decoration: none;
         background-repeat: no-repeat;
         background-image: url(../rot.jpg);
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
         color: #FF0;
    /* 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: #FEF3E4;
         color: #FF0;
         background-image: url(../rot.jpg);
    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-color: #000;
    background-image: url(../rot.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    /* 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-color: #0F9;
    /* 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-color: #FEF3E4;
         color: #FF0;
    /* 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-color: #F99;
    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);
    </style>
    </head>
    <body>
    <div id="container">Raum für den Inhalt von  id "container"
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">Element 1</a>  </li>
    <li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
        <ul>
          <li><a href="#" class="MenuBarHorizontal">heija</a>      </li>
          <li><a href="#">soso</a></li>
    </ul>
      </li>
      <li><a href="#">Element 4</a></li>
    </ul>
    <p>  </p>
    <p> </p>
    <p> </p>
    <p> </p>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

  • Background image in a div?

    I know how to use css to place a background image inside a
    div. However, I would like that image to be contextual, and be
    differrent depending what the current page is. As an hypothetical
    example, I would like a non-repeating background image of an apple
    inside <div class="content"> when the page apples.html is
    open, but then an image of a banana would be the background image
    inside <div class="content"> for bananas.html.
    If there is a way to place background images on the fly,
    directly in the html, that would be the better solution for this
    novice.
    Thanks for any help!
    r

    Do it this way -
    <style type="text/css">
    div.content { background-repeat:no-repeat; }
    #apples div.content {
    background-image:url(/images/apple.jpg); }
    #banana div.content {
    background-image:url(/images/banana.jpg); }
    </style>
    (put this in the head of each page (or put the rules into a
    site-wide
    external stylesheet)
    Now, on the apples page, change this -
    <body>
    to this -
    <body id="apples">
    and on the bananas page, change it to this -
    <body id="bananas">
    Get it?
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "Sbisa" <[email protected]> wrote in message
    news:ffqvhs$5q6$[email protected]..
    > Thank you!
    >
    > I will give it a try. I am googling for tutorials on
    this, but if anyone
    > has one in their pocket that they could share, much
    appreciated.
    >
    > r

  • Flex4 How to set background image in Vgroup..?

    Hi.,
            I have using v flex 4 vgroup to set background image., but image was not display.. any change my code.,
    <fx:Style>
          .backgroundImage
                color:#808080;
                fontWeight:bold;
                fontSize:18;
                fontStyle:italic;
                contentBackgroundColor : #FFFFFF ;
                backgroundImage:Embed("assets/Green Apple.jpeg");
    </fx:Style>
    <s:VGroup paddingBottom="10" width="100%"  height="600" paddingTop="10"  styleName="backgroundImage">
        <s:Label text="hai hai hai">
             </s:Label>
           </s:VGroup>
    any solution to solve this....
    With Regards.,
    LinFlex-

    @Peter
    Yes! This works well now. Now I can get repeating background images directly in the code as well as in my CSS style sheets.  This looks good and helps me a lot as there are lots of occasions for me using this. I've gotten used to having repeating image backgrounds in HTML and missed that in Flex 3. This feature alone makes moving to Flex 4 worthwhile.
    This works fine for me:
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx">
      <!--make a background for the whole page  -->
        <s:BorderContainer width="100%" height="100%"
             backgroundImage="@Embed('images/bkg/grey_grid.gif')"
             backgroundImageFillMode="repeat" >
      <!--make an inner area with a graphic background  -->
            <s:BitmapImage id="legalPad"
                  source="@Embed('images/bkg/legalPad.gif')"
                  fillMode="repeat"
                  left="40" top="100"
                  width="825" height="200" />
        </s:BorderContainer>
    </s:Application>
    Here are the images I used:
    grey_grid.gif
    legalPad.gif

  • Using Background Image In Dreamweaver

    Good evening.
    I'm using a non-repeating, centered background image in Dreamweaver. But i'd like it to self-adjust its size depending upon what monitor size its viewing it.  Can someone provide some coding for help with this???
    Here's where i'm at thus far..
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="welcome10.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    <body style="background-color: #000; background-position: center top; background-repeat: no-repeat; background-image: url(images/girls-bg9.jpg); background-attachment: fixed;">
    <div id="wrapper">
              <div id="container">
        </div>
    </div>
    </body>
    </html>
    css -
    @charset "utf-8";
    /* CSS Document */
    #wrapper{
              width: auto;
              height: 1600px;
    #container {
              background-color: #FFF;
              height: 200px;
              margin-right: 100px;
              margin-left: 100px;
              margin-top: 100px;
    thanks guys, and gals...

    Background-size would do the trick, but keep in mind, most CSS3 does not function in IE9 (though this will), and won't at all in IE8 and down. If you need it to work in those browsers, the best way to do it would be with javascript. I've used the script available on this site with some success...
    http://louisremi.github.io/jquery.backgroundSize.js/demo/

  • Wrapper div background image won't appear in browser...

    Hi All,
    Here's a link to the test site:
    http://www.davidcoshdesign.com/test/tee
    If you go to 'About' – top right nav, there should be two vertical 'lines' running all the way down the page(s), either side of the main body copy. 
    All the pages are created from the same template.
    It's a repeating background image in the #wrapper div.  I can see it DW, but not in any browsers.
    I guess it's not linking somehow... but can't figurte it out.
    Also, the layouts on the 'Partners and 'Philosophy' pages 'jump' when you go to them.  Again, I guess there's an error in the code somewhere...
    Any help with these two things would be very much appreciated.
    RP

    Change this -
    #wrapper {
        background-repeat: repeat;
        background-image: url(assets/images/columnedge.jpg);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-style: normal;
        line-height: 19px;
        font-weight: normal;
        color: #999;
        text-decoration: none;
        width: 980px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        height: auto;
    to this -
    #wrapper {
        background-repeat: repeat;
        background-image: url(assets/images/columnedge.jpg);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-style: normal;
        line-height: 19px;
        font-weight: normal;
        color: #999;
        text-decoration: none;
        width: 980px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        height: auto;
       overflow:hidden;
    You need to clear the floats so that div#wrapper will contain the contents.  To fix the jumping, add this to your CSS -
    html { overflow-y:scroll; }

Maybe you are looking for

  • Trying to uninstall and reinstall iTunes

    A number of my past files are no longer playing fully. Some cut-out. Others don't come in until well into the song. This seemed to occur after I upgraded iTunes to 6.0.4. Now, my purchased songs are not uploading fully even though the bar on the scre

  • Changing Fiscal Calendars in APO 4.0

    All, We need to change our Fiscal Period in APO.  When we make this change, do I have to copy the data to a backup cube, change the fiscal calendar, and then reload the data back into DP? I am on SCM 4.0.  We will be going to SCM 5.0 in February.  Wi

  • Moving layers into Group

    I am a web designer and have created a script that puts a browser UI around a Photoshop document. The action places several images and creates several text layers. What I want to do is place all the images then add them into a group called "BROWSER".

  • How to use StreamTokenizer class ?

    i want to use StreamTokenizer class in my program so that when i read from a file i want to make tokens of words present in the file, but i dont know how to use this class in my program, as i didnt find any example which shows how to use StreamTokeni

  • Creating a "Duplicate Layer", crashes CS5

    Since the update to Mac OS 10.6.7, when ever I attempt to create a "Duplicate Layer" of an image, CS5 crashes, sending an error message to the Mac persons, etc.  I can only get around this issue, by switching CS5 back to 32 bit (from 64) and re-open