Footer over background image

I have a site with a large different background image behind every page. I want the footer to be stick to the bottom of the browser window, with the background image going behind the footer.
Muse pushes the footer below that background image.
Suggestions?
Jeff

Hello, I can think of 2 ways to fix this.
1. Use this background image as browser fill and it will stay behind the footer.Second half of the video below explains how to do that.
Add an image to the background of the page or browser | Adobe Muse CC tutorials
2. You can also use layers tab in muse.
    Create a new layer in Layers tab
    Move the new layer below the existing layer (drag and drop).
    select the footer items and move them to the lower layer by right click > Move to layer > select the lower layer. Make sure Footer items are below the layer that has the background image. Check more about layers in the like : Adobe Muse Help | Working with Layers
Regards
Vivek

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

When I try to print, I get one page with a header and the background image, another page with the content, and a third page with a footer and background image. How can I make it print properly?

Also, if I print to a .pdf, the background does not show up even if I have the checkbox checked to print background image.
The site I'm trying to print is:
[http://www.puertovallartatours.net/coupons-discounts.htm http://www.puertovallartatours.net/coupons-discounts.htm]

I did not have the HP printer software for Mac OSX installed properly. Once installed the problem went away.

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

How do you make a rectangle resize with background image?

I'm trying to add links (transparent rectangles) to a background image that is set with "scale to fit". However when it scales in needs to scale with my links. Can I have the rectangles scale with the background image? If not is there a better way of doing this?

As I understand. correctly. You want the rectangles that you have added over background image, (to which links are added) to be responsive in layout within the project, Am I correct ? If yes ! Muse does not implement "Responsive Layout" as defined by a hand coder. For more details refer to : Can you create responsive sites with Adobe Muse?

Main Wrapper, Container and background-image repeat problem-and Footer :-)

Hi everyone,
First off, i tried almost every idea i could get to solve this on my own but now im...aaa...
Well, the problem is i have a main wrapper with a background image repeat. A header,menu, body container - which has a left column and right column. I want that main wrapper,body container and both of the columns to grow auto according to content. I tried the height:100%. When i float the columns the text from left column spills over on to the footer. The left column also does not autogrow towards the footer?! I was able to set the footer at the bottom which i want it to remain at the bottom of the main wrapper, but the main wrapper and the columns do not grow automatically...I guess it has something to do with float and the clear properties but what???
body{
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
font-size: 11px;
font-family: verdana;
text-align: center;
background:url(back_index3.png) repeat-x scroll 0 0 #E4E4E4;
#main_wrapper {
width: 959px;
margin:0 auto;
margin-top:80px;
background:url(backslice.png) repeat-y;
height:auto;
min-height:800px;
#header {
width: 959px;
margin-left: auto;
margin-right: auto;
height:119px;
background:red;
padding-top: 0px;
padding-bottom: 0px;
#topmenu {
background-color:#blue;
height:30px;
margin:0px;
width: 959px;
margin-left: auto;
margin-right: auto;
#body_container {
height:100%;
width: 949px;
margin: 0 auto;
#content {
float:left;
width: 645px;
background:yellow;
border-right:1px solid #ffffff;
padding:10px;
height:100%;
text-align:left;
#sidebar {
float:left;
width: 283px;
background:#234234;
height:100%;
#footer {
clear:both;
height:200px;
background-color: #686768;
margin:0 auto;
border-top: 1px solid #F6F6F6;
text-align:center;
width: 100%;
<html xmlns="">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="3css.css" />
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<div id="main_wrapper">
     <div id="header">
      <span id="header_logo">title</span>
     </div>
     <div id="topmenu">
     menu
     </div>
     <div id="body_container">
      <div id="content">
content to be added
      </div>
      <div id="sidebar">
      hallow2
      </div>
     </div>
</div>
<div id="footer">
asd
</div>
</body>
</html>
Thanks in advance if somebody can help me out here.
you can see an image of the problem in the attachement down thr... thnx

<html xmlns="">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="3css.css" />
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<div id="main_wrapper">
     <div id="header">
      <span id="header_logo">title</span>
     </div>
     <div id="topmenu">
     menu
     </div>
     <div id="body_container">
      <div id="content">
content to be added
      </div>
      <div id="sidebar">
      hallow2
      </div>
     </div>
</div>
<br clear="all" />
<div id="footer">
asd
</div>
</body>
</html>
Hope this will work well

Blend Overlay is not working in Safari over site's background image

My message is concerning the website (below) called
suspendedinsound.com.
The blend mode, Overlay, is not working on several of my
movie clips in the Safari browser.
The Flash swf and html is published with a transparent
background. I put a bg image (via CSS) in the html code. The
objects with overlay (the large animating gold rings and
play/stop/mute buttons), are not "overlaying" over the html's
background image. They look yellow or cream instead of being very
subtle (dark reddish brown). This is only a problem in the Safari
browser. Looks great in Firefox and IE.
Anybody have a solution?
Thanks
-loren
http://www.suspendedinsound.com

Transparent background is a less than robust publishing
option for Flash. As you've seen, it can produce some unreliable
results.

PLEASE HELP ME to put an image over a background image !!

Hello,
I need help on my AWT program. I have a map being displayed, and would like an image of a car (car.gif) to be displayed over the image of the map.
So my question is: How do I make this map a background image, and put the picture of the car right over it. I need my map loaded all the time, and the picture of the car will be reloaded many times over the same map, so a class method to load this map would be perfect. Any help, code, or suggestions would be great. Thanks so much!
Here is what I currently have for my map.
import java.awt.*;
import java.awt.event.*;
public class MyImage extends Panel {
    private Image im = null;
    Graphics g;
    public void getMap(){
      im = Toolkit.getDefaultToolkit().getImage("C:\\test_map.gif");
         MediaTracker tracker = new MediaTracker(this);
         tracker.addImage(im,0);
         try {
             tracker.waitForID(0);
         }catch (InterruptedException e){}
             repaint();
   public void paint(Graphics g){
        this.g = g;
         if (im != null)     {
            g.drawImage(im,0,0,this.getWidth(),this.getHeight(),this); //706,397
    }

Look at this sample, the car will start when the button will be pressed, and stop on the next press.
import java.awt.event.*;
import java.awt.*;
public class UsaTrip extends Frame
     mapPanel map   = new mapPanel();
     Button   move = new Button("Move");
     TheMover mover = null;
public UsaTrip()
     addWindowListener(new WindowAdapter()
    {     public void windowClosing(WindowEvent ev)
          {     dispose();
               System.exit(0);}});
     setBounds(10,10,500,400);
     setLayout(new BorderLayout());
     add(map,BorderLayout.CENTER);
     add(move,BorderLayout.SOUTH);
     move.addActionListener(new ActionListener()
     {     public void actionPerformed( ActionEvent e )
               if (mover == null)
                    mover = new TheMover(map);
                    move.setLabel("Stop");
               else
                    mover.end();
                    mover = null;
                    move.setLabel("Move");
     setVisible(true);
public class TheMover extends Thread
     mapPanel map;
     boolean go   = true;
     int      spin = 0;
public TheMover(mapPanel m)
     map = m;
     start();
public void end()
     go        = false;
public synchronized void run()
     while (go)
          map.moveCar();
          try     {sleep(100);}
          catch(InterruptedException i){}
public class mapPanel extends Panel
     Image map;
     Image car;
     int   x=10,y=30;
public mapPanel()
     map = getToolkit().getImage("usa.gif");
     car = getToolkit().getImage("home24.gif");
     MediaTracker tracker = new MediaTracker(this);
     tracker.addImage(map,0);
     tracker.addImage(car,0);
     try   {tracker.waitForID(0);}
     catch (InterruptedException e){}
public void moveCar()
     repaint(x,y,25,25);
     x++;
     repaint(x,y,25,25);
public void update(Graphics g)
     paint(g);
public void paint(Graphics g)
     Rectangle r = g.getClipBounds();
     g.drawImage(map,r.x,r.y,r.x+r.width,r.y+r.height,
                          r.x,r.y,r.x+r.width,r.y+r.height,this);
     g.drawImage(car,x,y,this);
public static void main(String[] args )
     new UsaTrip();
Noah
import java.awt.event.*;
import java.awt.*;
public class UsaTrip extends Frame
     mapPanel map = new mapPanel();
     Button move = new Button("Move");
     TheMover mover = null;
public UsaTrip()
     addWindowListener(new WindowAdapter()
{     public void windowClosing(WindowEvent ev)
          {     dispose();
               System.exit(0);}});
     setBounds(10,10,500,400);
     setLayout(new BorderLayout());
     add(map,BorderLayout.CENTER);
     add(move,BorderLayout.SOUTH);
     move.addActionListener(new ActionListener()
     {     public void actionPerformed( ActionEvent e )
               if (mover == null)
                    mover = new TheMover(map);
                    move.setLabel("Stop");
               else
                    mover.end();
                    mover = null;
                    move.setLabel("Move");
     setVisible(true);
public class TheMover extends Thread
     mapPanel map;
     boolean go = true;
     int spin = 0;
public TheMover(mapPanel m)
     map = m;
     start();
public void end()
     go = false;
public synchronized void run()
     while (go)
          map.moveCar();
          try     {sleep(100);}
          catch(InterruptedException i){}
public class mapPanel extends Panel
     Image map;
     Image car;
     int x=10,y=30;
public mapPanel()
     map = getToolkit().getImage("usa.gif");
     car = getToolkit().getImage("home24.gif");
     MediaTracker tracker = new MediaTracker(this);
     tracker.addImage(map,0);
     tracker.addImage(car,0);
     try {tracker.waitForID(0);}
     catch (InterruptedException e){}
public void moveCar()
     repaint(x,y,25,25);
     x++;
     repaint(x,y,25,25);
public void update(Graphics g)
     paint(g);
public void paint(Graphics g)
     Rectangle r = g.getClipBounds();
     g.drawImage(map,r.x,r.y,r.x+r.width,r.y+r.height,
               r.x,r.y,r.x+r.width,r.y+r.height,this);
     g.drawImage(car,x,y,this);
public static void main(String[] args )
     new UsaTrip();

Footer background image stretching width of screen

I want to stretch my footer image the full width of the screen to mirror my header. It's easy for the header, as you simply designate this the body background image. The footer is different owing to differing page lengths. Is the only way to do this to take the footer div out of the container div?

Hi pziecina,
Actually, I found a simpler solution by creating a wrapper div for the footer outside the container div. I cannot be bothered to utilize CS3 yet and I absolutely hate conditional comments for IE...
This tutorial explains how to do it:
http://www.sohtanaka.com/web-design/achieving-liquid-backgrounds-with-fixed-content/

JTextArea over JLabel(image for background) Can't Receive Mouse Events

Hi, I use JLabel for putting background image to a JWindow. But when i put a JTextArea component, i can see and edit the contents but JtextArea only receives keyboard events. When i click on it ,its Focus Gained Event is not fired. No blinking cursor is shown.
I tried to use JLayeredPane and put them on different layers but it doesn't solve the problem.
I searched the Forums but can't find a suitable answer.
Any comments please...

hey man,
your problem happen not because your JTextArea over a JLabel, but cause JWindow not take focuse before jdk1.4, so if you need to see your blinking cursor just replace your JWindow with a JFrame.
for the JTExtArea focusing problem, u may refer to the sun bug forum there is a lot of work around.

How do i create a background image that i can place objects over (editiabel region)

To whom it may concern:
I apologize my dreamweaver skills are a bit rusty to say the
least-sorry. Anyway, i need to be able to place objects and edit
regions of my website that i have a background image on (i have the
opacity turned down so it appears to be nothing more than a
sillouette). I could really use some pointers. Thanx.

Find the DW executable file (in the Program Files/Macromedia
folder
hierarchy), right click on it, select Version, and tell us
which file
version # you see there, please. It will be something like
6.0.xxxx.
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
==================
"SUPERSTEVE1000" <[email protected]> wrote
in message
news:fcphk5$k3c$[email protected]..
> Hey dee,
> sorry i cant give u an address yet im still tryin to
work out the bugs on
> my
> template. As i said, its been a few years since i have
used dreamweaver,
> and i
> think that we are using a slightly older version of
dreamweaver (6.0) than
> i am
> used to. Um, could u explain DIV's a little more for me,
u can call me
> directly if u want 4174592295.
>

Enlarge image over background.

I have imageflow FX and i would like to know how to have the multifader effect in the background...and then have one of those images (or any image) go from the small background image, enlarging into the foreground?
thanks

http://www.coremelt.com/products/products-for-final-cut-studio/imageflow-tutoria l-video.html

What is the Proper Way to place a Background Image inside a Div?

I have been searching Google and the Adobe forums for awhile now, and while there are very valid solutions to similar problems I found that none of them fixed the problem that I am facing. I blame myself and getting lost in this sloppy coding of mine, so part of my plan was to start my style sheet over from scratch.
My question, what is the proper way to add a background image into a div? I currently have the top div following the "header" css style, here is what I have typed into that sections:
<style type="text/css">
@import url("../twoColLiqLtHdr.css");
.header {
    width: 1000px;
    height: 300px;
    background-image: url(Assets/HeaderTemplate.png);
    background-repeat: no-repeat;
    background-position: center;
The problem here is that the background image isn't even appearing. I would greatly appreciate any help, could anyone inform me on the proper way to doing this so that I can implement images in divs in the future without turning my coding in a down right mess?
Thank you in advance.

I apologize, I'm unable to post a link to the page just yet. This is a snip of coding for a website still in the making for the company I work for.
Would any of the coding below help?:
</script>
<style type="text/css">

</style>
<link href="../twoColLiqLtHdr.css" rel="stylesheet" type="text/css" />
</head>
<header class="twoColLiqLtHdr">
<scmenu class="twoColLiqLtHdr">
<tab class="twoColLiqLtHdr">
<body class="twoColLiqLtHdr">
<div class="header" align="" id="header">Content Goes Here</div>
<div class="scmenu" align="" id="scmenu">Content Goes Here</div>
<div class="tabs" align="" id="tabs">Content Goes Here</div>
<div class="body" align="" id="body">Content Goes Here</div>
<div class="footer" align="" id="footer">Content Goes Here</div>
<script type="text/javascript">var TFN='';var TFA='';var TFI='0';var TFL='0';var tf_RetServer="rt.trafficfacts.com";var tf_SiteId="11773g197b36be92cde14c11fc77dacc3a2a4f1660eb17h9";var tf_ScrServer=document.location.protocol+"//rt.trafficfacts.com/tf.php?k=11773g197b36be92c de14c11fc77dacc3a2a4f1660eb17h9;c=s;v=5";document.write(unescape('%3Cscript type="text/JavaScript" src="'+tf_ScrServer+'">%3C/script>'));</script>
</body>
</html>
That above is parts I added into the source code.

Placing a background image in fluid grid layout

I am having trouble building a fluid grid layout I am not sure why but when I shrink the layout it doesn't seem to work correctly
I need to do 2 things.
1) make the background image shrink as it is suppossd to. when you scale down the images doesn't shirink to tablet size and isn't there for the phone size (although I think I want a new image for phone with just one side of the (page image). on it so I assume I just link that in there under that section in in the css
2)It doesn't seem to want to align the writing so that it is only over the page section of the background image on each side (the rightcontent and left content boxes-ie they should look like text on a page)
also I want to take the page here when it is finished and make it a template for further pages (just changing the text) is that done the same as usual for the fluid grids?
Thank you in advance for the help
Here is the link that the site has been temp posted on for detail editing.
http://approvalsite.info/

Kind of makes sense.
I am not sure how to make the div tag layouts relative to the background image.
please advise.
also, I have been playing with it and it seems to be working better now.
But the issue I have with it now is that the image on the right side of the page keeps showing at the bottom of the page instead of on the top of the page directly next to the wording on the left.
does anyone know why?
I am sure it is just a simple coding issue.
help
approvalsite.info
CSS:
@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
    max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width: 100%;
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:        5;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:    25;
    Inspiration from "Responsive Web Design" by Ethan Marcotte
    http://www.alistapart.com/articles/responsive-web-design
    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
    width: 85%;
    padding-left: 1.82%;
    padding-right: 1.82%;
    background: url(../images/DSC_0014.jpg) center fixed;
    -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      -background-size: cover;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#menubar {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#leftcontent {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    height:auto;
#rightcontent {
    clear: both;
    float: right;
    margin-left: 0;
    width: 100%;
    display: block;
    height:auto;
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
    width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
    background: url(../images/DSC_0013.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      -background-size: cover;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#menubar {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#leftcontent {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#rightcontent {
    clear: both;
    float: right;
    margin-left: 0;
    width: 100%;
    display: block;
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
    width: 90%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    background: url(../images/DSC_0013.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      -background-size: cover;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#header {
    clear: both;
    float: left;
    margin-left: 5%;
    width: 100%;
    display: block;
#menubar {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#leftcontent {
    clear: both;
    float: left;
    margin-left: 15%;
    width: 30%;
    display: block;
    padding-right: 2%;
#rightcontent {
    clear: none;
    float: right;
    margin-left: 1%;
    width: 49%;
    display: block;
    margin-right: 8%;
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
HTML
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="_css/layout.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>

<link rel="stylesheet" href="index_files/css3menu1/style.css" type="text/css" />

</head>
<body>
<div class="gridContainer clearfix">
<div id="header"><h1>Jan Kardy's Literary Agency</h1></div>
<div id="menubar">

<ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a href="../index.html" style="height:18px;line-height:18px;">Home</a></li>
    <li class="topmenu"><a href="../about_jankardys.html" style="height:18px;line-height:18px;">About Jan Kardys</a></li>
    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>Resources</span></a>
    <ul>
        <li><a href="../Education_connection.html">Education Connection</a></li>
        <li><a href="../submission_guidelines.html">Submission Guidelines</a></li>
        <li><a href="#"><span>Blogs</span></a>
        <ul>
            <li><a href="http://unicornwritersconferencect.blogspot.com/">Unicorn Writers Conference</a></li>
            <li><a href="http://advancenetworkingunicorn.blogspot.com/">Advanced Networking Blogs</a></li>
        </ul></li>
        <li><a href="../first_steps_to_publishing.html">First Steps to Publishing</a></li>
        <li><a href="../library_publish_events.html">Library & Publishing Events</a></li>
        <li><a href="#">Art Gallery</a></li>
    </ul></li>
    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Clients</a></li>
    <li class="toplast"><a href="#" style="height:18px;line-height:18px;">Contact Jan Kardys</a></li>
</ul>
<p style="display:none"><a href="http://css3menu.com/">Horizontal Menu Using CSS Css3Menu.com</a></p>

</div>
<div id="leftcontent">
    <p>Jan   Kardys, President of Black Hawk Literary Agency, has thirty years of   diversified publishing experience for nine major publishing   corporations. Black Hawk Literary Agency LLC represents a broad spectrum   of authors and illustrators, with a focus on new nonfiction and   fiction. <br />
    </p>
    <p>Jan was Director of   Contracts for Warner Books/Little, Brown & Company, Director of   Contracts at Macmillan Publishing Company, Charles Scribner's Sons, and   Contracts Director at Prentice Hall/Simon & Schuster. Ms. Kardys has   worked at Harcourt Brace Jovanovich, Doubleday, Scholastic, Lippincott   & Crowell, Publishers, St. Martin's Press, Conde Nast Publications,   and Google. Beginning a career in editorial, Jan also worked in art and   production in School publishing. Jan held various executive positions in   subsidiary rights, licensing, database design, imaging, royalty   conversions, contracts, copyrights & permissions departments.<br />
    </p>
    <p></p>
</div>
    <div id="rightcontent"><p><strong><center>Jan Kardys, Literary Agent<br />
    Black Hawk Literary Agency, LLC. <br />
    17 Church Hill Road,<br />Redding, CT 06896</center></strong></p>
    <p><strong><center>
      <p><img src="images/jankardys.jpg" alt="jankardys_headshot" /></p>
      <p>Blog: <a title="http://bookpublishingteacher.blogspot.com" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://bookpublishingteacher.blogspot.com">http: bookpublishingteacher.blogspot.com</a><br />
      </p>
      <p>Email: <a href="mailto:[email protected]" title="mailto:[email protected]">[email protected]</a> <br />
      </p>
      <p>Phone: 203-938-7405</p>
    </center></strong></p>
</div>
    <div id="footer"><h6>Webpage designed by Technomage Web Design</h6></div>
</div>
</body>
</html>

Tiling a background image

I've recently moved over from GoLive, and I am re-doing my site template in DW. I want to do a background image that will expand as needed (be really long on a long page, not so long on a short one, etc.) and can't figure out how. My old one was done as one column of a table, so if the second column kept going, so did the image in the first column (see http://www.bikeraceinfo.com/about-us.html , it's the red/white/green stripe down the left side, and is a separate image from the red/white/green stripe that folds around from the image across the top). I am using a 3-column layout provided by DW ("3 column fixed, header and footer"). I've tried doing a tiled background in the "container", didn't work (nothing showed up at all). Tried a tiled background in "main content", it did put the stripes in, but since "main content" in my layout is centered, that wouldn't work, and it only showed up where there weren't words. Tiling it in the "body" puts it outside of the container, so it doesn't line up with the top graphic, and gets swallowed up and disappears on a small monitor. I tried putting in another div which would contain the tiled graphic, but it didn't seem to understand a height of "100%" to mean that it should go all the way to the bottom of the page. What do I do?
Carol

From what I understand, I think you are looking for a technique called "Faux Columns."
It looks to me as though you are trying to rebuild your set using CSS instead of tables for layout. That's a good idea! I think that you need to be cautious about using height in your layout because the most comfortable position is to allow the content of an element to determine that. Not always of course, but where you have content that changes between pages it will help.
Nancy O shows you a layout using faux columns here:
http://alt-web.com/TEMPLATES/3-col-white-gray.shtml
And you can see the image that she has used to make the faux columns here.
http://alt-web.com/Images/BG/tri-color-bg.gif
It would be eaier to advise if you could post a link to the new page and someone could probably tell you exactly which element to put an image into but effectively the image can go in the containing element.
I hope that helps and that I haven't misunderstood your question
Martin

Footer over background image

Similar Messages

Maybe you are looking for