Skip navigation
Currently Being Moderated

How do I use a different background image on html files built from template?

May 4, 2012 11:30 AM

Tags: #cs5 #html #template #dreamweaver #css #background_image

I am in the process of developing a website using Dreamweaver CS5. I have created a template (.dwt) and all of the style sheets (css).  I am now ready to create the html files built off the template.  Here is my dilemia though...


I want each of my html files to have a different background image in the footer (don't ask why - I'll try and post a link to the website once it is live and it will make sense...). 


In my style sheets, I have created classes for each of these various footers (example: .footerHome OR  .footerAbout, etc.....).  Now my only problem is, when I create the html files built off the template, I am unable to change the class since it is not in an editable region.  And when I try to adjust the editable region to include the entire footer, it breaks some other stuff. 


Of course I could scrap the template all together and just create the html files, however, the template is a huge time saver for making changes in the future that affect every page in the site. 


Any suggestions?  Thanks!

  • Currently Being Moderated
    May 4, 2012 11:45 AM   in reply to InnoSparkLLC

    In your template, you can just move the comments that mark the beginning and end of the editable regions so that it encompasses your changing footer background:

    <!-- TemplateBeginEditable name="" -->

    <!-- TemplateEndEditable -->


    Without seeing the code, I can't tell you where to place the comments but as long as you don't remove any, or put them inside another editable/non-editable region, it should be ok.


    As for time-saving, you could look into Server Side Includes for your navigation and footer etc. Easier to manage than a template.

    Mark as:
  • Currently Being Moderated
    May 4, 2012 12:05 PM   in reply to InnoSparkLLC

    Ensure you have an editable region in your Template's <head> tag.

    Use embedded CSS for page specific styles. Embedded styles trump external CSS styles.



    <!-- TemplateBeginEditable name="head" -->


    <style type="text/css">

    #footer {background:#custom color or image...}



    <!-- TemplateEndEditable -->





    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points