Adding Text To A Background Image

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

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

Similar Messages

Why States don't work on Tablet view for text frames over background image?

I have Macbook Pro with Top config on top S/W everything updated.
Using Muse.
Tablet view site.
Simple text frames buttons with states over a full width background image - DON'T WORK!
The text frame buttons are in TOP layer.
Visible but do not respond to to any touch. UNLESS I delete the background image.
Can't figure it out for days.
Please help.
Thanks
Eli @

TO MUSE STAFF!!!!
I Found a major bug that needs to be fixed:
In Tablet view:
A linked text frame or state button has to be in the top layer to respond to states.
If a composition menu is opening up and covering the button when triggered - THE BUTTON WILL NOT RESPOND EVEN IF THE COMPOSITION IS CLOSED!!!
Only if the button is ARRANGED ABOVE the composition in the layer and becomes the absolute TOP OBJECT in the layer - ONLY THEN it will respond.
PLEASE LET ME KNOW IF YOU GOT IT.
I have tested it on a few projects and the bug is consistent.
[email protected]
Thanks for fixing it in the near future
Eli

Adding Text to a Buffered Image

Hey
I am trying to add text to a bufferedimage image and have tried a couple of ways.
I cannot seem to get it to work propely though. Everytime i try, the text appears but the image appears inside the lettering of the text and not under it like i want it to.
Could someone please explain the best way of place text on TOP of an image as i am really stuck now :(
Thanks in advanced for any help

Basically paint your buffered image into a new BufferedImage and then paint in the new text on top.
Here's a demo.
import java.awt.*;
import java.awt.font.*;
import java.awt.geom.*;
import java.awt.image.BufferedImage;
import javax.swing.*;
public class BufferedImageTest
    public static void main(String[] args)
        ImageGenerator ig = new ImageGenerator();
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(ig.getOriginalImagePanel(), "North");
        f.getContentPane().add(ig.getTextPanel(), "South");
        f.setSize(400,640);
        f.setLocation(200,50);
        f.setVisible(true);
        f.getContentPane().add(ig.getNewImagePanel());
        f.validate();
        f.repaint();
class ImageGenerator
    JPanel originalPanel = new JPanel()
        public void paintComponent(Graphics g)
            super.paintComponent(g);
            Graphics2D g2 = (Graphics2D)g;
            g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                                RenderingHints.VALUE_ANTIALIAS_ON);
            int w = getWidth();
            int h = getHeight();
            g2.setPaint(Color.blue);
            g2.fill(new Rectangle2D.Double(w/16, h/16, w*7/8, h*7/8));
            g2.setPaint(Color.yellow);
            g2.fill(new Rectangle2D.Double(w/8, h/8, w*3/4, h*3/4));
            g2.setPaint(Color.red);
            g2.fill(new Ellipse2D.Double(w/6, h/6, w*2/3, h*2/3));
            g2.setPaint(Color.green);
            g2.draw(new Line2D.Double(w/16, h/16, w*15/16, h*15/16));
    JPanel textPanel = new JPanel()
        Font font = new Font("lucida sans regular", Font.PLAIN, 32);
        String text = "A New Label";
        public void paintComponent(Graphics g)
            super.paintComponent(g);
            Graphics2D g2 = (Graphics2D)g;
            g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                                RenderingHints.VALUE_ANTIALIAS_ON);
            g2.setFont(font);
            FontRenderContext frc = g2.getFontRenderContext();
            LineMetrics lm = font.getLineMetrics(text, frc);
            float textWidth = (float)font.getStringBounds(text, frc).getWidth();
            int w = getWidth();
            int h = getHeight();
            float x = (w - textWidth)/2;
            float y = (h + lm.getHeight())/2 - lm.getDescent();
            g2.drawString(text, x, y);
    public ImageGenerator()
        originalPanel.setBackground(Color.white);
        originalPanel.setPreferredSize(new Dimension(300,200));
        textPanel.setOpaque(false);
        textPanel.setPreferredSize(new Dimension(300,200));
    private BufferedImage createNewImage()
        BufferedImage image = new BufferedImage(originalPanel.getWidth(),
                                                originalPanel.getHeight(),
                                                BufferedImage.TYPE_INT_RGB);
        Graphics2D g2 = image.createGraphics();
        originalPanel.paint(g2);
        textPanel.paint(g2);
        g2.dispose();
        return image;
    public JPanel getOriginalImagePanel()
        return originalPanel;
    public JPanel getTextPanel()
        return textPanel;
    public JPanel getNewImagePanel()
        JPanel panel = new JPanel()
            BufferedImage image = createNewImage();
            public void paintComponent(Graphics g)
                super.paintComponent(g);
                Graphics2D g2 = (Graphics2D)g;
                g2.drawImage(image, null, 0, 0);
        return panel;
}

Adding video to a background image

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

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

Subtracting Text From A Background Image

Hello!
I have a banner, and some text. I would like to subtract the text from the banner to create a 'cut-out' effect. What's the easiest way to do this on photoshop?
Thanks.
Martin

Since you haven't included the Layers panel in the screenshot, I'll guess that all you need to do is adjust the the text layer's Blending Options: set Fill to 0 % and Knockout to something other than "None" (see Help for info about the options). If that doesn't help, let us see the Layers panel.

Background image not scrolling with text

My foreground text will resize with my browser but the background stays stationery, remains in the upper left. How do I fix this? I have included part of my code.
Ideally I would like to anchor text boxes to background image so it will scroll all together. If this can't be done I can use the margins and padding to adjust my text to work with the background I just need it to move with it. I've seen samples of this, which i think may have been done in photoshop but I would like to keep the copy live in DW. FYI, I added "background-attachment:scroll" to the code. I have searched and searched online for a solution to no avail. I am attaching a coupld of PDFs so you can see where I want to go. Any help is greatly appreciated. Thanks a bunch in advance and please be gentle.
body {
     background: #666666; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
     padding: 0;
     text-align: center;
     background-image: url(Images/Background_Radial77.jpg);
     background-repeat: no-repeat;
     margin-right: 0%;
     margin-top: 19%;
     color: #FFF;
     background-color: #FFF;
     background-attachment:scroll
     margin-left: 0%;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 100%;
     margin-bottom: 0;
     margin-left: 0;

My foreground text will resize with my browser but the background stays stationery, remains in the upper left. How do I fix this?
That's how web pages work. Remember, web design is nothing like print design. Printed pages or graphics are static.   Web pages must be flexible to accommodate different displays, text sizes and varying amounts of content.   Trying to precisely position text or other objects over a huge background is a bit like trying to nail Jello to a wall. No matter how hard you try, it will never hold up.
Fixed Background Example -
http://alt-web.com/DEMOS/fixed-background.shtml
Scrolling Divisions Example -
http://alt-web.com/DEMOS/multi-scrollbars.shtml
Your best option is to slice and dice your background image into usable segements in Photoshop or Fireworks. Save images only. Then re-assemble slices in DW to create flexible containers.
Basic Tutorial - Bringing 3 image slices into a CSS layout -
http://alt-web.com/DEMOS/Image-slices-in-a-CSS-based-layout.shtml
Advanced Tutorial -
Taking a Fireworks (or Photoshop) comp to a CSS based layout in DW
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
Good luck with your project,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

How to put a background image in coldfusion page?

Hi all,
I have created number of coldfusion pages,i would like to have a background image for them either unique or different images.
So i have created a style.css and added a line for background image like
                    background-image: url(/images/nature.jpg);
But it doesn't works.
Even i tried this by giving in head section of all my cfm pages but it doesn't work.
Also i have used
<head>
     <style type="text/css">
          html {overflow-y:hidden;}
          body {overflow-y:auto;}
          #page-background {position:absolute; z-index:-1;}
          #content {position:static;padding:10px;}
     </style>
</head>
<body>
     <div id="page-background"><img src="images/sri.jpg" alt="Smile"></div>
         <div id="content">
              This is body content
         </div>
</body>
but the alt value 'smile' only appearing not the image.
I'm working on CFBuilder.
Both firefox and IE not displaying the image
Any help appreciated,
Chandru P

The fact that this is in a CF template is neither here nor there (other than the caveat about # as the other person said).
All CF does is generate mark-up. The mark-up is sent to the browser, and the browser renders it. So if your browser isn't rendering your image assets, it's because it can't find them.
I suspect your URLs are wrong. Are you getting 404s for the image URLs?
One thing to bear in mind is that URLs to resources are not relative to the CFM template they're in, they're relative to the URL the client requested, which are not necessarily (indeed very infrequently ~) the same.
Adam

Template - background image missing

Hi I'm sorry to be back but I have another problem that I don't seem to be able to solve. I have looked at similar posts online, but don't seem to have found the answer.
I have created a template from Dreamweavers blank templates. I have made ONLY TWO CHANGES to the blank template. I've added a background image, and removed the background colour from the .body element. I'm hoping this will help isolate my mistake.
When I create a new page from this template the background image does not display. I've noticed that the image path is changed in the child page - whereas the template displays the relative path, the full path is given in the child. I don't know if this is part of the problem?
The problem occurs both when I preview the site through a browser, as well as online.
I know I should be using templates for site-building, so need to know what I'm doing wrong here. Many thanks, and please remember that I'm a novice so put it very simply so that I can grasp what your saying!
http://www.gillwykes.com/development/frank_test/testpage2.html
Thanks!

I just tried a different approach. Created a new site, through Site Manager. Created an new HTML paged and did Save as Template. I then added an image ( which is stored in the images folder in the site) as a background through Page Properties. I saved and closed the template, and did File, New Page from Template. The image did not display, and the path to the image was changed. Here is the code.
<!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">
body {
background-image: url(../images/Copy%20of%20IMG_2481.jpg);
</style>
</head>
<body>
</body>
</html>
and
<!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">
body {
background-image: url(file:///C|/Documents and Settings/admin/My Documents/1DREAMWEAVER/1_IN_PROGRESS/template_test/images/Copy%20of%20IMG_2481.jpg);
</style>
</head>
<body>
</body>
</html>
I'm obviouly missing something along the line. It can't be a glitch in CS5.5 because it would be known by now! But I've tried so many different files and methods now I'm totally confused.
Next step, seeing if I can edit it in Notepad, and how that afffects things, and also digging out a previous version of Dreamweaver and see what happens there. Will let you know!

My background image wont load

I did my entire site but then when i added the image for the background it didnt show up once i pressed f12 but shows up in design mode. i started a new html and kept in the least amount of data or code on the site but can someone help or amend my code and tell me why my background image will not load. thanksss
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript" src="http://interface.eyecon.ro/jquery/jquery.js"></script>
<script type="text/javascript" src="http://interface.eyecon.ro/interface/interface.js"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background-image: url(Wallpaper.jpg);
.center {
width: 65%;
margin-right: auto;
margin-left: auto;
</style>
</head>
<body>
<div class="center">Content for New Div Tag Goes Here
<style type="text/css" media="all">
margin: 0;
padding: 0;
body
background: #fff;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
.fisheye{
text-align: center;
height: 50px;
position: relative;
a.fisheyeItem
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
a.fisheyeItem2
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
.fisheyeItem img
border: none;
margin: 0 auto 5px auto;
width: 100%;
.fisheyeItem2 img
border: none;
margin: 5px auto 0 auto;
width: 100%;
.fisheyeItem span,
.fisheyeItem2 span
display: none;
positon: absolute;
.fisheyeContainter
height: 50px;
width: 200px;
left: 75px;
position: absolute;
top: -2px;
#fisheye2
position: absolute;
width: 293px;
bottom: 355px;
left: 800px;
top: 320px;
</style>
<div id="fisheye2" class="fisheye">
<div class="fisheyeContainter" style="left: -28.5px; width: 350px;">
<a href="#" class="fisheyeItem2" style="width: 70px; left: 0px;"><span style="display: none;">Charity</span><img src="CHARITIES BUTTON.png" width="100"></a>
<a href="#" class="fisheyeItem2" style="width: 70px; left: 70px;"><span style="display: none;">Events</span><img src="EVENTS BUTTON.png" width="100"></a>
<a href="#" class="fisheyeItem2" style="width: 70px; left: 140px;"><span style="display: none;">Location</span><img src="LOCATION BUTTON.png" width="100"></a>
<a href="#" class="fisheyeItem2" style="width: 70px; left: 210px;"><span style="display: none;">Tickets</span><img src="TICKETS BUTTON.png" width="100"></a>
<a href="#" class="fisheyeItem2" style="width: 70px; left: 280px;"><span style="display: none;">Multimedia</span><img src="Multimedia Button.png" width="100"></a>
</div>
</div>
<p>
<script type="text/javascript">
$(document).ready(
function()
$('#fisheye').Fisheye(
maxWidth: 35,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 70,
proximity: 90,
halign : 'center'
$('#fisheye2').Fisheye(
maxWidth: 35,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 70,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
</script>
<script language="JavaScript" type="text/javascript">var client_id = 1;</script>
<script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"></script>
<noscript>
<p><img alt="" src="http://stats.byspirit.ro/image.php?client_id=1" width="1" height="1" /></p>
    </noscript>
</div>
</body>
</html>

Your code has a lot of errors.
Try this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page title</title>

<style>
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    background: #FFF url(Wallpaper.jpg);
    font-size: 100%;
</style>
</head>
<body>
<header>
<h1>Heading 1 text</h1>
<h2>Heading 2 text</h2>
</header>
<article>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</article>
</body>
</html>
Nancy O.

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.

Problems to add a background-image to the widget Spry MenuBar!

With DreamweaverCS4 version 10.0 Build 4117, (italian language) I have tried to add a Spry MenuBar to the one website page.
But the problem is that I haven't understood where add my property "background-image": url(../immagini/Menu_Button_01.gif).
In the Application Page of Dreamweaver I have this screenshot:
But in the Preview Window of InternetExplorer 7 I have this strange behavior:
The "Menu_Button_01.gif" are a rounded square button made with PhotoshopCS4 and have a transparent background.
In the IE7 MenuBar doesn't appears as expected, without the transparent background!
1) How can I do to show my "Menu_Button_01.gif" image as transparent background in the MenuBar?
2) What is the correct CSS Style Rule to apply the "background-image" property?
(Example: "ul.MenuBarHorizontal li"? Or "ul.MenuBarHorizontal a"? )
3) Should I also apply the property: "background-color:transparent"? Where? What is the specific CSS Style Rule?
I have uploaded my little local WebSite to Rapidshare (100KB):
http://rapidshare.com/files/370735082/Test_Spry.zip.html
Please download it to inspect my problem.
Please response me!
Horsepower0171.

For a starter, you should not put your background style rules in the following. The accompanying descriptions will tell you this.
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 116px;
    float: left;
    background-image: url(../immagini/Menu_Button_01.gif);
    background-color: transparent;
/* 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: 116px;
    position: absolute;
    left: -1000em;
    background-image: url(../immagini/Menu_Button_01.gif);
    background-color: transparent;
Then when you apply style rules to
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
    background-image: url(../immagini/Menu_Button_01.gif);
    background-color: transparent;
this will be overridden by the following rules. They replace your image with an arrow image.
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
There are one of two solutions
If you do not want and arrow, simply set background to none in the above four instances.
If you do want an arrow, include a down arrow image in a second Menu_Button_01.gif image called Menu_Button_01_DownArrow.gif or similar as well as a third one for your right arrow image.
I hope this helps.
Ben

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.

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.

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

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

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

Help with background image (Not sure how to ask this..........)

I have just started to try and make my first site. I designed it in Photoshop first as I learned in many tutorials. I don't know why my background image looks like this when I scale down below 100%, but at 100% or "fit all"&"fit width" it doesn't change and I can't move it with the hand tool or scroll it. I'm sorry, I'm just learning.
Thank you.

Hello,
in addition, I tried this (page properties = translated from my German DW) too an the only difference had been this "missing end bracket".
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ioneglines.com</title>
<style type="text/css">
body {
background-image: url(myImage.png);
background-repeat: no-repeat;
</style>
</head>
<body>
</body>
</html>
... before you insert your image as a background image, you have to give it the dimensions, you want to see in your file. Please use try and error method.
Hans-Günter

Adding Text To A Background Image

Similar Messages

Maybe you are looking for