As one of the “experts” on Dreamweaver in the world (at least according to all of you), I always get a kick out of discovering something new in my favorite program. And, since it just happened, I thought I’d share…

Back in CS3 we implemented copy/paste between Dreamweaver and Photoshop, allowing Dreamweaver to then optimize and save the image before placing it on the Dreamweaver page. With CS4, we updated the workflow to allow you to drag-and-drop a PSD directly into Dreamweaver with the same optimization/save process happening.

However, in seminars, I have always pointed out that if you want to use a piece of the PSD as a background image, you needed to do the copy/paste procedure. Then delete the image from the page, create a CSS rule and link to the newly created image as a background image.

Well, here’s the newly discovered enhancement: there’s no need to do the copy/paste/delete! The next time you’re thinking that you need a CSS background image for an element, simply choose to edit the rule (or create a new one if necessary) using the CSS dialog box in Dreamweaver CS4. Select the Background category and click the Browse button to locate the PSD file you’re interested in. Once you click OK to choose the PSD, you should see the optimization window open within Dreamweaver. You can then use the Crop tool (located at the bottom of the window) to isolate the area you wish to use as the background image. Set your optimization format and amount and click OK. Dreamweaver will prompt you to save the file in your site, and then return you to the CSS dialog with the image field filled out so that you can set additional properties (such as repeat, positioning, etc).

The only caveat to this procedure is that your PSD file needs to have been saved in a “useable” state. In other words, if you need to turn on/off a layer or layer group in order to get the “right” image, then this technique won’t work.

Hope this helps… Cheers!