2 Replies Latest reply on Apr 2, 2010 3:37 AM by melanro

    Changing the background image on a  CS4 Dreamweaver Template


      I am setting up a 4-page Web site in which I would like to change the background image on each page. I have made a template and am making each page from it. The reply may simply like to offer instructions on doing this.


      I have tried changing it in the editable section, but when I do this, the CSS changes for each page. The next thing I tried was adding a new CSS for each page that would include only the new background image. This is working on Dreamweaver and a preview in Firefox, but when I open it up in the browser, I'm getting part of the site, the background color but not the image.


      Here is the page source from the browser:


      <!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">
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Crane Outdoor Contact</title>
      <link href="twoColFixLt.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
      <style type="text/css">
      /* place css box model fixes for IE 5* in this conditional comment */
      .twoColFixLt #sidebar1 { width: 230px; }
      <!--[if IE]>
      <style type="text/css">
      /* place css fixes for all versions of IE in this conditional comment */
      .twoColFixLt #sidebar1 { padding-top: 30px; }
      .twoColFixLt #mainContent { zoom: 1; }
      /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */

      <style type="text/css">
      body {
           background-color: #2e61b2;

      <body class="twoColFixLt">

      <div id="container">
        <div id="sidebar1">
          <h3><a href="index.html"><img src="Images/Home.jpg" alt="Crane Outdoor Home" width="100" height="25" border="0" /></a></h3>
          <p><a href="cosizeandterms.html"><img src="Images/SizeTerms.jpg" alt="Size and Terms" width="100" height="25" border="0" /></a></p>
          <p><a href="colocations.html"><img src="Images/Locations.jpg" alt="Locations" width="100" height="25" border="0" /></a></p>
          <p><a href="cocontact.html"><img src="Images/contact.jpg" alt="Contact" width="100" height="25" border="0" /></a></p>
        <!-- end #sidebar1 --></div>
        <div id="mainContent">
           <!-- end #mainContent --></div>
           <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
      <!-- end #container --></div>