Fraiming container using a background image in body

I am very new to this. I am trying to frame the <container> using sunflower images in <body>. When you zoom in or out. The image in body does not float with the container. I have tried several tihngs but nothing works. What am I doing wrong? see nancylgrant.businesscatalyst.com/store.html

Add the highlighted line
body {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 100%;
    line-height: 1.4;
    font-size-adjust: none;
    font-stretch: normal;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    color: #000000;
    background-color: rgba(135, 151, 210, 0.5);
    background-image: url("http://nancylgrant.businesscatalyst.com/images/weatherboardbackgrnd4.png");
    background-repeat: no-repeat;
    background-position: center top;
    height: 100%;
    width: 100%;

Similar Messages

Using a background image for the buttons in spry menu

Hi All,
Going nuts here.
I'm using the vertical spry menu widget w DW CS3 and trying
to alter the css style sheet, so that I can use a li class for each
of the 14 links on this page, with an upstate and a hover state
only. (the focus, and hover while down will be the same as the
others, to keep it simple and not too distracting)
The page is here that I will be replacing the entire
background image in sidebar1 and sidebar2 with a custom spry menu
with the 14 li classes for 2 seperate menus:
http://audibleimagesav.com/blank_doc.html
Has anyone used a background image in place of just using
bkgrd colors and borders for the spry menu ?
I am aware of the attributes that the help docs suggest that
need to be altered as listed here :
http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0BB04E11-1BE3-4a67-BC94-BE7DA 93A0159.html
I have been working on just an experimental page, that is now
hacked up, however if you want to see that it is here with only the
first list item coded:
http://audibleimagesav.com/site%20theme%20ideas/sprymenu_exp.html
The spry css menu widget for that page is here:
http://audibleimagesav.com/SpryAssets/SpryMenuBarVertical.css
So in short, has anyone done a bkgrd image for the main menu
(not submenu) in a spry widget?
Thanks in advance.
Art
Art Hansen
Web Design & Marketing
http://www.innova-techsolutions.com
321.750.3852 - Cocoa Beach, Florida, USA

http://meyerweb.com/eric/css/edge/popups/demo2.html
Maybe

Template loses background image from body

When I open a self created template page (all regions editable) I lose the background image from body. Everything else loads fine.
First time I'm trying the template option.

I made a change to the root folder today when I noticed DK2011 was caps and possibly not prooper protocol so I created a new folder which was captured in previous post now known as dksite.
Here is another pic with my root folder and you can see templates and images open with the background image showing which is the_voice_mansiongood.jpg.
The background image comes up in the dkmainpage tempate but does not show in a new page created from the parent template.
Here's the code from dkmainpage template (parent) below.
I fear I'm making things insanely confusing.
Here's code to parent template dkmainpage template.
<!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>Dan Kennedy Artist</title>

<style type="text/css">
body {
     background: url(../images/front/the_voice_masiongood.jpg) repeat;
#wrapper {
     width: 950px;
     margin-right: auto;
     margin-left: auto;
     background: #FFF;
     height: 950px;
     margin-top: 20px;
     padding-top: 25px;
h1, h2, h3, p {
     margin: 0px;
     padding: 0px;
#header {
     height: 50px;
     width: 325px;
     float: left;
     margin-top: 10px;
     margin-bottom: 50px;
     margin-left: 40px;
#header h1 {
     font-family: Verdana, Geneva, sans-serif;
     font-size: 175%;
     font-weight: normal;
     color: #cc7981;
#navbar {
     height: 45px;
     width: 450px;
     float: right;
     margin-top: 3px;
     margin-bottom: 40px;
     margin-right: 60px;
#navbar h2 {
     font-family: Verdana, Geneva, sans-serif;
     font-size: 100%;
     font-weight: normal;
     color: #666;
     text-align: right;
#mainContent {
     height: 750px;
     width: 441px;
     clear: right;
     float: right;
     margin-top: 0px;
     margin-right: 60px;
     text-align: right;
.title {
     font-family: Verdana, Geneva, sans-serif;
     font-size: 80%;
     font-style: normal;
     font-weight: normal;
     color: #968A67;
#sidebar {
     height: 475px;
     width: 325px;
     clear: left;
     float: left;
     margin-top: 0px;
     margin-left: 40px;
     margin-bottom: 20px;
#sidebar p {
     font-family: Verdana, Geneva, sans-serif;
     font-size: 75%;
     font-weight: normal;
     line-height: 1.4;
.sideColoura {
     color: #967A25;
.sideColourb {
     color: #BE72C5;
.sideColourc {
     color: #448E78;
#artcouncillogos {
     height: 150px;
     width: 200px;
     clear: left;
     float: left;
     margin-left: 40px;
     margin-top: 25px;
</style>


</head>
<body>

<div id="wrapper">
<div id="header">
    <h1>Dan Kennedy</h1>
</div>
<div id="navbar">
    <h2><br />
      home | selected work | bio | links | contact</h2>
</div>
<div id="mainContent">
    <p><img src="../images/dust_of_oblivion/dan_kennedy_old_trail_to_ragtown.jpg" width="441" height="650" alt="Painting by Dan Kennedy" /><br />
      <br />
      <span class="title"><em>The Old Trail to Ragtown Lullaby</em><br />
        50"x 34" oil/canvas 2007<br />
        private collection </span></p>
</div>
<div id="sidebar">
    <p><br />
      <span class="sideColoura">TICKET TO RIDE<br />
        Sept.13-Oct.30, 2010<br />
        University of Waterloo Art Gallery</span><br />
      <br />
      <br />
      <br />
    </p>
    <p> </p>
    <p><span class="sideColourb">WEIRDO NOIR / Book / Fall 2010<br />
      featuring:Dan Kennedy, Alex Gross, Travis Louie, Tara Mcpherson and more....</span><br />
      <br />
      <br />
      <br />
    </p>
    <p> </p>
    <p class="sideColourc">SURVEY SELECT- Narrative Art<br />
      San Diego, July 15 -Sept. 5,2010 <br />
      Wonderbread Factory<br />
      artists:Jeff Soto, Clayton Brothers, Dalek and more... </p>
</div>
<div id="artcouncillogos"><img src="../images/front/oac-cc.png" width="168" height="125" alt="Ontario arts council logos" /></div>
</div>

</body>
</html>

Can I design a web page to use the background image from the user's installed persona?

I build web applications, and I would like to have an application use the background image from whatever persona the visitor has installed, if any. Is this possible, using css/js/html?

No that is not possible with code on web pages (userContent.css could probably do this).<br />
The persona is only used as the background for the user interface (toolbar) area and not for websites.<br />
The dimensions of the persona with the height of 200px is also not enough to cover a page.

Spry Menu Bar using CSS background image without losing submenu ( V) indicators

Spry menu bar sets the down and side submenu indicators using
a positioned background image. I have a requirement to use a
specific background image yet must retain the > and v submenu
indicators. Without having to generate full width custom background
images for each of the menu item types to include the side and down
menu indicators, is there anyway to use a generic background image
and show the indicators using just CSS?

Don't use reserved words in JS
var event = new Spry.Data.XMLDataSet("events.xml", "catalog/event", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
event is such a reserved word. If you change this to event1 then all is well.
I hope this helps.
Ben

Help Me!! Re: Using A background image In my DWT Header

Hello,
I have tried posting several messages regarding this issue but not sure if I am explaining my dilemma properly. So here we go, here is the link to my Generic Template page which I converted to an html to enable you to view it. (http://bridgestoprosperity.org/Templates/General.htm). Now what I am trying to do is use the image that is currently in the header as a background image , BUT i cannot figure out how to insert it as a div background image. Then once I fugure that out I am hoping there is a script that will be able to dynamically insert the page title for each page as it's opened. The title needs to be placed on the right hand side of header ABOVE the words Bridges to Prosperity USA over the background image.
Because this is the main template for our entire site i am hoping that once I figure this out, I can just save all the new changes to the template and be done with it and from then on when I create a new page from template because it will hopefully have some code in it where it calls the Title of the page from some script that I will no longer have to create headers with embedded (non searchable) Page titles for EACH AND EVERY ONE OF OUR OVER 750 PAGES.......
YIKES, PLEASE HELP, AND I WOULD BE FOREVER IN YOUR DEBT IF YOU COULD ACTUALLY INCLUDE CODE IN YOUR RESPONSE AND EXPLAIN EXACTLY WHERE TO PUT IT OR WHAT TO REMOVE AND WHAT TO PASTE. THE MORE DETAILED THE BETTER CAUSE I AM VERY NEW TO ALL OF THIS.
I really appreciate it,
Allan

Your mistake is to drawImage and then call super.paintComponent, which paints over the image you have drawn. That's not what I said, re-read my earlier response.protected void paintComponent (Graphics g) {
   super.paintComponent(g);
   g.drawImage(icon.getImage(), 0, 0, null);
   //super.paintComponent(g);
}I would also advise against calling icon.getImage inside the paintComponent, make a Image instance field and call the method once to store a reference to the Image.
paintComponent is called many times during resize / move operations, and should be as lean as possible.
db
edit To post code, use the code tags -- [code]Your Code[/code]will display asYour CodeOr use the code button above the editing area and paste your code between the tags it generates.
Edited by: Darryl.Burke

Unable to use edited background image

I am using Captivate 3 on Windows XP Pro. After I edit a
background image in an external image editor, the image is saved in
a temporary folder, and I can't work out how to incorporate it back
into Captivate so it will replace the original image. There doesn't
seem to be anyway of identifying the "Library" folder through
Windows Explorer to replace it.
I'd be grateful for any guidance on this,
David

Hi David and welcome to our community
How are you kicking off the edit process? Right-clicking the
image in the library? If so, the Library should auto update. But
you may also need to right-click and choose update to force it.
If you just copied into an image editor, you should be able
to simply select and copy inside the image editor and paste into
the background to update.
Cheers... Rick

Accordion using different background images on panels

Hi,
I'm creating an accordion in Dreamweaver cs3 which has seven
panels. I would like to use a different background image for each
panel. I have only managed to use a single image, that ends up on
all the panels. Any ideas on this?

It worked!!! a BIG hug to U..
quote:
Originally posted by:
Newsgroup User
I haven't done this, but I would think it would be pretty
easy by copying
the .AccordionPanelTab style code and pasting it over and
over and then
changing the class names to .AccordionPanelTab1,
.AccordionPanelTab2, etc.
Of course, you would also change the div references in your
pages.
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development
"Kimson76" <[email protected]> wrote in
message
news:fkudd1$1hp$[email protected]..
> Hi,
>
> I'm creating an accordion in Dreamweaver cs3 which has
seven panels. I
> would
> like to use a different background image for each panel.
I have only
> managed to
> use a single image, that ends up on all the panels. Any
ideas on this?
>
> .AccordionPanelTab {
> height: 30px;
> background-image:
>
url(file:///Macintosh%20HD/Users/kimson.ekman/Desktop/web%20development/challeng
> er_purple/images/7.jpg);
> background-repeat: repeat-x;
> background-color: #122541;
> border-top: solid 0px #1C3B5A;
> border-bottom: solid 0px #1C3B5A;
> margin: 0px;
> padding: 0px;
> cursor: pointer;
> -moz-user-select: none;
> -khtml-user-select: none;
>

When I save images from Firefox, they can't be used as background images!

Hi! I have a small problem with Firefox that bothers me. I run on a Mac OS X Snow Leopard. When I see an image that I like, I right click and choose "Save Image". I store it in my Pictures folder. When I go to the manager that helps me choose a background, the picture isn't available to use! But when I save a picture in Safari, it is there for me to choose. Why does this happen? Thank you!
== This happened ==
Every time Firefox opened

Does that image has the correct file extension (.jpg) ?
Can you open the image in a picture viewer?

Replacing images used as a link with background image

OK - I'm embarrassed to say that what I'm trying to do is
blindingly
obvious, and I've used Dw for several years - and do most of
the work
in code view but I'm having a senior moment and can't do what
I want.
I've read that when you use images on a page for background
styling,
for example the logo, or an image of a professional body such
as IEE,
it is more semantically correct to use CSS background images
rather
that a <img src=
tag
So I have a div in which I put the background, but then
perhaps quite
logically you can't directly put a link to it. So how do you
do it.
I've tried to ensure there was a block element so when you
hover l
mouse over it you get a block link - but no joy.
maybe my dyslexia early is the sign of premature brain fade
~Malcolm N....
~

You cannot place a link on a background image. However, you
can place a
link on a transparent image floated over the background.
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
==================
"Malcolm N_" <[email protected]> wrote in message
news:[email protected]..
>
> OK - I'm embarrassed to say that what I'm trying to do
is blindingly
> obvious, and I've used Dw for several years - and do
most of the work
> in code view but I'm having a senior moment and can't do
what I want.
> !!!
>
> I've read that when you use images on a page for
background styling,
> for example the logo, or an image of a professional body
such as IEE,
> it is more semantically correct to use CSS background
images rather
> that a <img src=
> tag
>
> So I have a div in which I put the background, but then
perhaps quite
> logically you can't directly put a link to it. So how do
you do it.
>
> I've tried to ensure there was a block element so when
you hover l
> mouse over it you get a block link - but no joy.
>
> maybe my dyslexia early is the sign of premature brain
fade ;-)
>
> --
>
> ~Malcolm N....
> ~

Re: Problem using Background Images

Newbie is trying to use a background image inside a table. It seems that if the table size is larger that the original image itself; then the table has a blank space where the image does not show; and if the table is smaller than the image; then the background image has a cropped appearance. What do we have to do to correct this problem?

Background images do not stretch to fill their container. At least they don't do this yet (reliably). That's just the way it is. Most people will fill the remaining space with a color similar to the overall image color, when the image is too small to fill the background. When it's too large? Well, that's just the way it is.

Background image in banner area & in one in body are not fully visible

I am a newbie and I created my site with one of the Adobe templates. For a while my site was loading correctly in both IE and Firefox. I don't know what I did, but I had to have changed something. Now the photo in the banner area and one in the body is not visible.
Please help.
URL: http://www.webtivity.me/
CSS Code is:
@charset “UTF-8”;
/* --- CSS Document by Codify Design Studio - codifydesign.com --- */
body {
margin: 0px;
color: #000000;
font-size: 12px;
font-family: Arial;
font-family: Arial, Verdana, Univers;
background-color: #FFFFFF;
h1 {
color: #25476C;
font-size: 24px;
font-weight: normal;
margin: 3px 0px 25px 0px;
h2 {
color: #214265;
font-size: 14px;
font-weight: normal;
margin: 0px 0px 15px 0px;
h3 {
color: #244669;
margin-top: 12px;
margin-bottom: 0px;
p {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 12px;
margin-left: 0px;
a {
color: #36C;
a:visited { color: black; }
a:hover { color: #5872f4; }
.container {
width: 980px;
margin-left: auto;
margin-right: auto;
/* BANNER AREA */
.bannerArea {
width: 100%;
height: 83px;
background-color: #cfcfcf;
.bannerArea .container {
height:83px;
background-image: url(images/banner_bkgd_webtivity.jpg);
background-repeat: no-repeat;
background-color: #000000;
.bannernav {
padding-top: 20px;
float: left;
color: #112c4c;
font-size: 10px;
font-family: Arial, Helvetica, Verdana, sans-serif;
.bannernav a {
color: #000000;
text-decoration: none;
.bannernav a:visited { color: #ffffff; }
.bannernav a:hover { color: #112c4c; text-decoration: none; }
.toplogo {
padding-left: 30px;
padding-top: 5px;
/* TOP NAVIGATION AREA */
.topnavigationArea {
width: 100%;
height: auto;
background-image: url(images/topnav_bkgd_webtivity.jpg);
background-repeat:repeat-x;
background-color: #624C7D;
.topnavigationgroup {
margin: 0px;
float: right;
p/adding-right: 40px;
.topnavigationgroup ul {
margin: 0px;
background-color: #3399FF;
.topnavigationitem {
max-width: 167px;
margin-left: 0px;
padding-left: 10px;
padding-top: 9px;
padding-right: 10px;
padding-bottom: 9px;
border-left-style: solid;
border-left-width: 1px;
border-right-style: none;
border-right-width: 1px;
color: white;
font-size: 14px;
font-weight: bold;
font-family: Arial, Helvetica, Verdana, sans-serif;
float: left;
/* CONTENT AREA */
.contentArea {
width: 100%;
background-color: #f0eff0;
background-image: url(images/content_bkgd_tile.jpg);
background-repeat: repeat-x;
.contentArea .container {
padding-top: 30px;
padding-bottom: 30px;
background-image: none;
background-repeat: no-repeat;
.contentleft {
width: 650px;
padding-left: 40px;
padding-right: 40px;
float: left;
border-right-style: solid;
border-right-width: 1px;
.contentright {
padding-top: 20px;
float: left;
padding-left: 30px;
width: 210px;
.imageright {
margin-left: 5px;
float: right;
/* FOOTER AREA */
.footerArea {
width: 100%;
background-color: #cfcfcf;
border-top-style: solid;
border-top-color: #000000;
border-top-width: 4px;
.footerArea .container {
height: 77px;
background-image: url(images/footer_bkgd_webtivity.jpg);
.copyright {
padding-left: 40px;
padding-top: 12px;
color: #FFFFFF;
font-size: 12px;
font-family: Arial, Helvetica, Verdana, sans-serif;
padding-right: 12px;

Banner image looks messed up to me.
Also, check your code.
You have a few CSS errors. Just skip the Spry related ones.
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. webtivity.me%2F
And a missing <html xmlns="http://www.w3.org/1999/xhtml"> tag
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.webtivity.me%2F
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How can I make an image tile length of browser without using it as background image?

I understand that if you use the rectangle tool and stretch it to the edge of the page, triggerring the red margin, the tiled image is supposed to stretch the length of the browser. Although this works for width, tiling horizontally, for some reason, it doesn't work for length, tiling vertically. When I preview my work in browser, the tiled image doesn't extend along with the footer as I scroll down the page.
When I use the image as background fill and tile it, then it works, but I need to use a different image for the background.

Hi
As you have mentioned you can either use browser fill with tile fitting or design the browser background image outside of Muse using any image editor like Photoshop and then use as browser fill which would include both images the one you want to use as background image and the one that you want to use as Tile on page section.
Thanks,
Sanjit

In AFBrandingBarTitle how to use background-image

Tell me the exact use of background-image component in AFBrandingBarTitle with the line of code and full description

Mayur Mitkari
version -JDeveloper 11g Release1
customizing skins through code
try to add image from desktop into the skin , As a background image of Branding bar title
Edited by: 942784 on Jul 9, 2012 11:13 PM
Edited by: 942784 on Jul 9, 2012 11:14 PM

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">

</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">

</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">

</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">

</script>
</body>
</html>

Fraiming container using a background image in body

Similar Messages

Maybe you are looking for