How to get a footer to stay at the bottom in Dreamweaver

January 25, 2011 7:20 PM

Dreamweaver HALP, please. I cannot figure out how to make a footer do what I want it to do.

I have a gradient I would like at the bottom of a webpage I am designing. It starts gray & fades up to white, which is the page's background color. I thought I could simply make the image repeat across the bottom. I would like it to sit at the bottom, no matter how long the scolling (body) area is. I would also like it to sit "behind" text in the body.

I'm anonymous because I'm embarrassed I can't make this happen. I'm a print designer, and used to WYSIWYG programs, not code-based programs. I've been trying to figure this out for hours by searches on Google, and nothing has helped yet.

Do I need to make this the whole background image? I can get that to repeat, but then the problem is that I have a fixed height to work with from top to bottom, and some pages will have more text than others.
Any advise would be greatly appreciated. I feel silly for not being to figure this out myself.

posted by anonymous to Computers & Internet (5 answers total)

You want to repeat the background horizontally and position it at the bottom left. So the height of your image should be the fixed height you talked about (let's say 800 px), and it should be narrow so that it repeats in strips across the page.

so the CSS will look like this:

background: white url(images/yourbackground.jpg) repeat-x bottom left;

I don't have Dreamweaver on this machine and I can't remember how to get to the CSS properties in it; I'm sure the help files can get you there. You should only need to insert the line of code and change the file path.

Some other information on background properties
posted by desjardins at 7:39 PM on January 25, 2011

You'll find the CSS Properties under Modify > Page Properties.
posted by milk white peacock at 7:43 PM on January 25, 2011

To do this through Dreamweaver's palettes:
Note: I am using CS4. If something in the following steps doesn't make sense, check the docs for your version to see what changed.

1) Select your footer div.
2) In your CSS Styles palette, hit the New Rule button. Make sure you have the appropriate div selected and hit Next.
2) Select the "Background" category. Choose your background image, make background-repeat "repeat-x", and make your background positions left and bottom, respectively.

Depending on how your footer div is set up, I'd almost do this in a separate div: This will only work ideally if your footer is positioned absolutely to the bottom and is 100% wide. (If you do decide to use a new div, though, make sure you give it a fixed height - the height of your image, for instance.)
posted by girih knot at 8:04 PM on January 25, 2011

Actually, scratch what I said about absolutely positioning it to the bottom: that will make it move if someone resizes the browser window. I don't know how best to do this.
posted by girih knot at 8:06 PM on January 25, 2011

You're not silly for asking this. I'm not a web developer, but I designed my company's website and ran into the exact same problem you're having: the "sticky footer" issue. Repeating the image across the bottom is the right way to make the gradient, but you need to tackle your sticky footer problem to make your footer stick to the bottom of the page first, then just put in your repeating image to create the gradient.
posted by booknerd at 8:27 AM on January 26, 2011 [1 favorite]