Background image has dissapeared

I have noticed that my homepage background image is missing
from the banner area. The text "Welcome to Easley Mitsubishi should
have an image behind it. That image is on the remote server and it
will not display. I checked the code on the homepage and it
correctly references the image. I also checked the code to see if
maybe I had accidentally set the background of a preceding
<p> or <td> or <th> or somthing as black and I
can find nothing. Anyone got any ideas...as this is happening
repeatedly and getting really annoying. The banner which should be
seen is visible at the top of the page in the second link.
Link 1
Link
2

It displays on Fx 3.0.3
Walt
"Mobilebyrd" <[email protected]> wrote in
message
news:genqiq$ckv$[email protected]..
>I have noticed that my homepage background image is
missing from the banner
> area. The text "Welcome to Easley Mitsubishi should have
an image behind
> it.
> That image is on the remote server and it will not
display. I checked the
> code
> on the homepage and it correctly references the image. I
also checked the
> code
> to see if maybe I had accidentally set the background of
a preceding <p>
> or
> <td> or <th> or somthing as black and I can
find nothing. Anyone got any
> ideas...as this is happening repeatedly and getting
really annoying. The
> banner
> which should be seen is visible at the top of the page
in the second link.
>
>
>
>
http://www.easleymitsubishi.com
>
>
http://www.easleymitsubishi.com/New_Vehicle_Search.htm
>

Similar Messages

Cisco 7970 Phone Background Image has lines through it

Hi everyone, I have an issue where the configured programmable buttons have a line going through the image and gray over the color as well. If I unconfigure the buttons the image is normal. Any suggestions on where to change this so my line buttons don't cover the image?
thank you,
Steve

Actually it is anywhere there is text configured on the screen. The company name configured on the bottom of the display causes a gray line across the screen as well.

Background Images Disappearing on External Display

I have a late model Macbook Air and just upgraded to Mountain Lion. Since doing so every time my Mac goes to screensaver and then I unlock it, it loses my background image on my external monitor (which I use as my primary when docked). The only way to then get it back is to logout and back in but then it onlh stays until it goes to screen saver again. Once it's "lost" opening "Change Desktop Background" and activating different background images has no effect... it just stays an ugly gray. This has onlhy been an issue since going to Mountain Lion and the image doesn't disappear on the Air's built-in display. Any ideas?

Unfortunately my issue is back. Selecting a new screensaver seemed to work for about 12 hours but now it's just the way it was. Today I tried softwater suggestion...
Open Terminal (Applications/Utilities/Terminal.app) and copy/paste this command into the Terminal window:
rm ~/Library/Preferences/com.apple.screensaver.plist
press 'return' on your keyboard.
Restart your mac and test for the issue.
... to no avail.
Other ideas?

Button with full background image

Hello,
I want to have a button with a image as background.
The background image has to fill the complete button background.
If you see the screenshot (url) , there is space around the image.
I have add a red border to see that the button size != background image.
I also tryed style with -fx-background-repeat: repeat-x;
[http://office.techniconsulting.be/~peeters/button.png]
Button button = new Button();
ImageView imageViewOn = new ImageView();
imageViewOn.setImage(....);
ImageView imageViewOff = new ImageView();
imageViewOff.setImage(imageViewOff);
button.setText(this.name);
button.setGraphic(imageViewOff);
button.setContentDisplay(ContentDisplay.CENTER);
button.setStyle("-fx-border-color: red; -fx-border-width: 1;");

Maybe not the perfect solution, but you can make the background transparant of the button so you won't see the button.
button.setStyle("-fx-background-color: rgba(0%,0%,0%,0)}");Else I would say, don't use a button and create your own.
-Stackpane
--ImageView with image
--text
For events, you can put events on the StackPane..
Edited by: FXdude on 25-jan-2013 5:02

Background Image in SharePoint 2013

Hi,
Whenever I add a background image in SharePoint 2013, approx. 99% of the background image has an automatic overlay applied; some form of automatic transparency, so that the image is more like a watermark.
Oddly, at the bottom of the page, there is about 40px visible of the true image, with no overlay applied.
How can I remove this default transparency, so that the background image displays as it should?
Thanks,
Dan

Hi Dan,
If you have SharePoint designer 2013, Then go To >> All Files >> _themes >> Search there for COREV15."blablabla" i think you got 2 files named COREV15 but try to search in one of these items to body {} or try to do "crtl + f" and
find "background colour" or search on "transparent"
hopefully this helps you a bit.
Good luck!
Malor

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.

The large image that displays the current weather has dissapeared?

On my weather app and on the notification centre widget, the large image that displays the current weather (inbetween your location and the current temperature) has dissapeared. All the infomation given by the app and widget is correct and the smaller weather icons still appear within the app and widget but not the larger one?
Can anyone explain the cause of this and give me a solution to fix it? Thanks

Hi fedotenko,
If your main objective is to print the images and merely not saving the images directly to the disk...I think you want to print these images without scrolling and the full content...So you can do something like below:
// Here mainContainer is the container or box id the contents of which you want to print
   private function doPrintContainer():void
    var printJob:FlexPrintJob = new FlexPrintJob();
    if(printJob.start() != true) return;
    try
     var mainContainerHeight:int = mainContainer.height;
     //Increasing the height of the desired component to be printed.
     mainContainer.height = mainContainer.measuredMinHeight;
     mainContainer.verticalScrollPolicy = "off";
     //Adding the resized Component to our FlexPrintjob and then sending the print request
     printJob.addObject(this,FlexPrintJobScaleType.MATCH_WIDTH);
     printJob.send();
     //Resizing the component back to normal size
     mainContainer.height = mainContainerHeight;
     mainContainer.verticalScrollPolicy = "auto";
    catch(error:Error)
                 trace("Error : " + error.message);
If this post answers your question or helps, please kindly mark it as such.
Thanks,
Bhasker Chari

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.

Background Image in Spry Menu

Hi everyone,
I'm really struggling with this Spry Horizontal Menu thing. I tried to read thru some other people's duscussions but I got lost.
I just want to add a gradient image instead of a plain color background. Now, I did achieved that on the main level items but as soon as I add submenus, the background image dissapear from the main items and shows on the submenus. That's it. I hope this is easy enough to fix.
I'm not that familiar with CSS and by looking at some samples, the CSS code is embedded in the same HTML page where the menu bar is. Isn't supposed to be on it's own CSS page? And one more thing, can the horizontal menu be inside a table? And if not, how can I center it on the page?
I'm a beginner so please be gentle... : )
Thanks

This is good but my problem is that my background image dissapear from the main menu item as soon as I add a submenu item... everything else seems to work just fine. About the question if the menu could go inside a table or if has to be out side of it, how can I centered it on the page?
thx

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.

In linux, saving a background image (set as Desktop)feature doesnt download my image to wallpaper folder..or even to standard "Save download" feature. Can I tell firefox where (what folder) to save my "Set as Desktop" picture?

When I find a suitable picture to use as wallpaper" I often right click and use the menu item "Set as Desktop Background". The file ""example.jpg" is saved in directory\folder "/home/user" rather than for example "/home/user/my wallpaper" or in the directory
"/home/user/Downloads". The latter as being set under the "Downloads" section on the "General" tab in the "Preferences" dialog box.
Is there a configuration file where I can change the default location to save my "Set as Desktop Background" images. Or better still can the menu be customized to launch the application that allows me to set my desktop wallpapers?
I am using the "PCLinuxOS" Linux OS but I have encountered this issue in many if not all the Linux distributions I have sampled.

Don't use "Set as Desktop". Use ''' "Save Image As..." ''' instead, and file it with your other "wallpaper" images so the operating system has access to those images.
IIRC, Firefox saves a "desktop image" to the Profile folder, and it will only save one image, at that. Change the image and the previous one is gone.

Different background image (div) on each page of site complicated by template

Hope I can explain this: Below are specifics
- Using Dreamweaver cs5.5
- Making the pages from a template.
- Each page will have a different backround image; but the image is contained in a div tag (div name is .mainbackground) which runs behind the main core of the site, the image is not in the <body>
- The div .mainbackground is EDITABLE
- I have already made a specific css class to assign to that div on each page so that the image is different on each page.
- On the template page the div .mainbackground has no image class assigned to it (thus no background image)
- Since that div is editable I can then go into each page and assign the desired image class to it - works great. EXCEPT...... & here's my main question:
- In the code all of the other regions are contained IN that above mentioned div of .mainbackground SO that means that:
- if I need to update the structure of the pages I will have to remove the Editable region that controls the background image which would be - removing the .mainbackround editable region. Then go back to my template, make changes and save everything - thus all the changes will carry through to my other pages. This is good and bad because I would get all the structural changes but I would also loose all of the text specific to those pages.
-Then when I'm finished I would have to go back and first add an editable region back to the .mainbackground class and then re-apply the background classes back to the .mainbackground to fix the images on the pages again...
The site is very small site so I can deal with it but am I going about this all wrong?
Is there some template feature I'm not getting? I would like to keep using the template feature, and i do want a different pic on each page.....
I have attached a picture showing one page so you can see the background image - which will be different on each page.

If your Template has embedded CSS within the <head> tags, and the <head> has an editable region defined, you should be able to change styles in child pages.
TEMPLATE CODE:
<head>
<style type="text/css">
.mainbackground { }
</style>
</head>


CHILD PAGE CODE:
<head>
<style type="text/css">
.mainbackground {
background-image:url(page2-BG.jpg)
</style>
</head>
Give it a try.
Nancy O.

Won't display background image in browser.

My background image displays in dreamweaver and in the live view but it doesn't display in the browser when I try to view in a browser or when I publish the website. I have spend hours looking for a solution and I am not sure what the problem is. I have checked the code on the following websites and it comes out ok:
http://jigsaw.w3.org/css-validator/validator
http://validator.w3.org/check
I have also tried my code with and without the overflow: hidden; under #container where the image should be displayed. (i was trying a new way to design -ie without basic grid and floating everything so the container can be removed if needed)
here is my code. Please help!!! thank you in advance!!!
<!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>Jan Kardys' Literary Agency</title>
<style type="text/css">
#header {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    float: left;
    width: 930px;
    color: #3F9;
#Menu_bar {
    float: left;
    width: 190px;
#Page_Content {
    float: right;
    width: 725px;
    height: 500px;
#footer {
    float: left;
    width: 930px;
#Main_content {
    float: left;
    width: 510px;
#xtra_content {
    float: right;
    width: 190px;
#container {
    width: 930px;
    margin: 0 auto;
    background-image: url(/Images/Parchment.gif);
    overflow: hidden;
</style>
<script src="file:///C|/Users/james/Documents/DREAMWEAVER SITES/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///C|/Users/james/Documents/DREAMWEAVER SITES/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
</style>
</head>
<body>
<div id= "container">
<div id="header"><h1>Jan kardy's Literary Agency</h1></div>
<div id="Menu_bar">
<ul id="Vertical_menubar" class="MenuBarVertical">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Jan Kardys</a></li>
    <li><a class="MenuBarItemSubmenu" href="#">Rescources</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="#">Education Connection</a>
        </li>
        <li><a href="#">Submission Guidelines</a></li>
        <li><a href="#">First Steps to Publishing</a></li>
        <li><a href="http://advancenetworkingunicorn.blogspot.com/">Advanceced Networkinig Blog</a></li>
        <li><a href="#">Library & Publishing Events</a></li>
</ul>
    </li>
    <li><a href="#">Client Links</a></li>
    <li><a href="#">Art Gallery</a></li>
    <li><a href="#">Contact Jan Kardys</a></li>
</ul>
</div>
<div id="Page_Content">
<div id="Main_content">Content for id "Main_content" Goes Here</div>
<div id="xtra_content"><h3>News & Events
    </h3>
    <p><a title="http://scotlandpubliclibrary.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://scotlandpubliclibrary.org/">Scotland Public Library</a>, Scotland, CT April 21, 2011 6-8pm<br />
</p>
    <p><a title="http://www.plymouthct.us/library.htm" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://www.plymouthct.us/library.htm">Plymouth CT Library</a>, Plymouth, CT April 30, 2011 10am<br />
    </p>
    <p><a title="http://www.hplct.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://www.hplct.org/">Hartford Public Library</a>, Hartford, CT May 7, 2011 10am<br />
    </p>
    <p><a title="http://www.middleburghlibrary.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://www.middleburghlibrary.org/">Middleburgh Library</a>, Middleburgh, NY May 14, 2011 1pm<br />
    </p>
    <p><a title="http://dewlib.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://dewlib.org/">Dewitt Community Library</a>, Dewitt, NY June 21, 2011 7pm<br />
    </p>
    <p><a title="http://gilfordlibrary.org/gpl/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://gilfordlibrary.org/gpl/">Gilford Public Library</a>, Gilford, NH July 7, 2011 6:30-7:30pm<br />
    </p>
    <p><a title="http://www.athollibrary.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://www.athollibrary.org/">Athol Public Library</a> Athol, MA July 14, 2011 5:30pm<br />
    </p>
    <p><a title="http://www.goshenpublib.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://www.goshenpublib.org/">Goshen Public Library</a> Goshen, CT July 23, 2011 11am<br />
    </p>
    <p><a title="http://columbiactlibrary.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://columbiactlibrary.org/">Saxton B. Little Free Library</a>, Columbia, CT July 26, 2011 6:45pm<br />
    </p>
    <p><a title="http://hampden-library.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://hampden-library.org/">Hampden Public Library</a>, Hampden, MA Sept. 10, 2011 10:30am<br />
    </p>
    <p><a title="http://fortlee.bccls.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://fortlee.bccls.org/">Fort Lee Public Library</a>, Fort Lee, NJ Sept. 14, 2011 7:00pm<br />
    </p>
    <p><a title="http://prosserlibrary.info/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://prosserlibrary.info/">Prosser Public Library</a>, Bloomfield, CT October 3, 2011 6:00-8:00pm<br />
    </p>
    <p><a title="http://iwwg.org" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://iwwg.org">IWWG. org</a>, New York City, October 16, 2011 2:30-6pm<br />
    </p>
    <p><a title="http://www.hchlibrary.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://www.hchlibrary.org/">Henry Carter Hull Library</a>, Clinton, CT October 24, 2011 6:30pm<br />
    </p>
    <p><a href="http://town.canton.ma.us/library" title="http://town.canton.ma.us/library">Canton Public Library</a>, Canton MA Janurary 7, 2012 2:00pm<br />
    </p>
    <p><a href="http://www.town.sturbridge.ma.us/Public_Documents/F0000F86A/library" title="http://www.town.sturbridge.ma.us/Public_Documents/F0000F86A/library">Joshua Hyde Library</a>, Sturbridge, MA March 24, 2012 10:30am<br />
    </p>
    <p>Otis Library Norwich, CT April 14, 2012 12:00am-2:00pm<br />
    </p>
</div>
</div>
<div id="footer"> <h6>Webpage designed by James S. Molina</h6></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("Vertical_menubar", {imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</div></body>
</html>

In regard to the files you currently have on your server, the links to your Spry menu files are still pointing to your local computer. This is caused when a site has not yet been defined in Site Manager, so DW is forced to link them locally.
To fix your page, just go into code view and remove the part of the link path that I have underlined and made BOLD.
<script src="file:///C|/Users/james/Documents/DREAMWEAVER SITES/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///C|/Users/james/Documents/DREAMWEAVER SITES/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

Spry Menu Bar - Different Background Image Wanted for menu items

Hi, I've looked everywhere for help with this and just haven't found any answers yet ...
I want my Dreamweaver CS5.5 menu to look like this design I've done in PhotoShop ...
It's a simple one level list with no sub-levels.
Everything is good, except I can only set one background image for all the menu items at this level.
I want the first, last, and all the middle, menu items to use different background images.
I have no idea where or how to insert the code to set a different background image for each individual menu item ...
I know I could use images set one on top another in a column with rollover image swop, but the spry menu opens the door for dynamic content so I'm keen to get it working.
Manchester city council has a great example of this style of menu design working at - http://www.manchester.gov.uk/
They've got funky indenting of the text as well.
~~~~~~
This is the code for my menu list ...
<div class="sidebar1">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Groups</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
         <li><a href="#">Help</a></li>
    </ul>
</div>
This is how I set the background image (but I can only define one image) ...
I set the image background to "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg" through ...
CSS Styles
SpryMenuBarVertical.css
ul.MenuBarVertical a
I then select the background category
and browse to the image file.
doing this changes my CSS code as follows ...
ul.MenuBarVertical li
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 170px;
    margin-top: 4px;
    margin-bottom: 4px;
    background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
ul.MenuBarVertical ul
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 170px;
    left: -1000em;
    top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 95%;
    background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #0000;
    text-decoration: none;
    font: normal 12px Verdana, Geneva, sans-serif;
    background: #EEE url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
~~~~~~
These are the three images I want to apply to the top middle and bottom menu items :
Top menu item background image - "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg"
Middle menu items background image - "Menu-Nav-Bar-Pic-Mid-v1-w170px-h32px.jpg"
Bottom menu item background image - "Menu-Nav-Bar-Pic-Bot-v1-w170px-h32px.jpg"
~~~~~~
As I am unable to set the menu items individually, this is how the menu looks like on my website at the moment ...
~~~~~~
So near yet so far ! I'm hapy with the verdana font, the image size and spacing, but the background images I just can't set them right.
I'd really appreciate any help on this as I'm out of ideas.
Thank you.

The easiest way is to use pseudo elements.
To style the first and last menu items ifferently to the rest, merely add :first-child and :last-child respectivly as follows
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<style>
ul.MenuBarVertical li:first-child a {
    background-color: red;
    color: white;
ul.MenuBarVertical li:last-child a {
    background-color: green;
    color: yellow;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
In your case, in liue of the background colour, you would have an image.
Gramps

How can I use a refrence background image ?

HI,
I need to register align horizontally and vertically) about 100 images to the first. I don't want to stack or merge them. An ideal way to accomplish this would be to be able to set the first image as a background reference image for all images in the group. There would be left/right buttons so I could advance through the stack, a slider to adjust the visibility of the foreground image, and up/down & right/left arrows so I could move the upper image a pixel at a time in any direction. In this case I don't need to rotate the image, but this would also be something a person might want to control. Then I would move through the group of images, stopping on each one to align the image to the first. One at a time, or after I am done, it would save all the aligned images to a new filename and folder, without changing the transparency of the image or in any way using the background reference image. Without rotating the images, every pixel in the new image would be the same as in the original, except moved. I would start by resizing the canvas of all the images so they have a border area. This way I can move the image around and not lose any of it.
Of course I could put the reference image in the background layer and the image to be adjusted above it on another layer. Then i can use the background as a reference by making the upper image somewhat transparent. Finially I could delete the background layer and save the image with just the adjusted layer. But this would be tedius with 100 images, even worse if there were 1000..
Is there a reference background image capability in Photoshop CC ? Is there a better or different way to do this ? Or can Bridge do it ?

Perhaps I need to explain my specific application. I have 120 images that are part of a time lapse sequence. The camera is photographing a meteor shower. I was able to capture a meteor which left a persistent trail that lasted about 5 minutes. Because the camera is on a tripod, the stars are constantly moving and in fact moved quite a bit during the 5 minutes the trail was visible. These images are of much higher resulution than the 1080 video I am producing. I have used premier to track the spot in the images and show the meteor and trail as a video close up that runs at about 15% speed. because the exposures were 30 seconds ;long, every 33 seconds, the sky has visibly moved from image to image. because I use only a few keyframes Premier tracks the spot smoothly. But since the pictures are each moved, not moving, the stars in the final video move back and forth with each image. they never go anywhere, but this movement is distracting and annoying. Theoretically I could eliminate this movement by having a different key for each frame. But the better way is to prepare the images so they are all aligned. Then there will be no movement at all.
You have seen this effect in documentaries. Here's a hypothetical situation. Someone has handheld video of an important event happening. because of the situation and the handheld camera, the picture moves around like crazy. To be able to view the event clearly as part of an investigation, each frame is aligned to the first so the subject doesn't move at all, while the image frame moves all around. I have seen this many times. Now I need to do it.
I have 120 pictures which all must be aligned so the stars in the picture do not move. i need to see a refrence image through the image to be adjusted, so I can move the image to be adjusted until its stars are perfectly aligned with stars in the refrence image. Of course this is like stacking, which is used to reduce noise and increase detail. but I don't want to stack the images, just adjust them horizontally and vertically, and then save them in their adjusted state.

Background image has dissapeared

Similar Messages

Maybe you are looking for