Dreamweaver Template Bug: CSS Backgrounds

by James Cook on November 2, 2010

Click here for more Dreamweaver bug reports…

Here's a bug (and some work arounds) that affects the CSS background property on pages created from templates that have their CSS rules in the <head> of the document.

The Issue

The bug occurs when you create a page based upon a template that has a CSS background defined in a style rule within the <head> of the document. BTW, this is exactly what happens when you use the menu: Modify>Page Properties… command.

The new page initially links to the background image file on the local disk (and the background doesn't display). In the CSS it looks something like this:

<style type="text/css">
body {
background-image: url(file:///path to image/background-image.jpg);

This is supposed to be a temporary link until you save the file. That makes sense because, until you save the file, DW can't know the path from the file to the image.

When you save the file DW SHOULD correct the link but it DOESN'T.

The Work Arounds

If, after saving the file you select menu: Modify>Template>Update Current Page, DW will update the page, fix the link and the background image will display (you can also get the same result by modifying the template, saving it and allowing the template to update the files).

A Better Solution

Personally I prefer to keep my CSS rules in an external style sheet which totally bypasses the problem. Of course that means you can't use the menu: Modify>Page Properties… command for setting CSS properties.

Moving Style Rules

In DW you can move style rules from the <head> of  a document to an existing or new external style sheet by selecting the rules you want to move in the CSS Styles palette and choosing Move Style Rules from the pop-up contextual menu in the top-right corner of the CSS Styles palette.

John Rozsa October 3, 2012 at 12:05 pm

Thank you! I was having this exact issue and it was driving me nuts. Anyway, I put the background reference in the external style sheet like you guys mentioned and it worked like a charm.

Thank you!

Comments on this entry are closed.

Previous post:

Next post:

Home | Make Contact