Skip navigation
Currently Being Moderated

Different background image (div) on each page of site complicated by template

Nov 21, 2012 5:48 AM

Hope I can explain this:  Below are specifics

 

 

- Using Dreamweaver cs5.5

- Making the pages from a template.

- Each page will have a different backround image; but the image is contained in a div tag (div name is .mainbackground) which runs behind the main core of the site, the image is not in the <body>
- The div .mainbackground is EDITABLE
- I have already made a specific css class to assign to that div on each page so that the image is different on each page.
- On the template page the div .mainbackground has no image class assigned to it (thus no background image)

- Since that div is editable I can then go into each page and assign the desired image class to it - works great.  EXCEPT...... & here's my main question:

 

-  In the code all of the other regions are contained IN that above mentioned div of .mainbackground SO that means that:

 

- if I need to update the structure of the pages I will have to remove the Editable region that controls the background image which would be -  removing the .mainbackround editable region.  Then go back to my template, make changes and save everything - thus all the changes will carry through to my other pages.  This is good and bad because I would get all the structural changes but I would also loose all of the text specific to those pages.

 

-Then when I'm finished I would have to go back and first add an editable region back to the .mainbackground class and then re-apply the background classes back to the .mainbackground to fix the images on the pages again...

 

The site is very small site so I can deal with it but am I going about this all wrong?


Is there some template feature I'm not getting?  I would like to keep using the template feature, and i do want a different pic on each page.....

 

 

I have attached a picture showing one page so you can see the background image - which will be different on each page.screen shot for adobe forum.JPG

 
Replies
  • Currently Being Moderated
    Nov 21, 2012 10:17 AM   in reply to fourwhitesocks

    I'm not sure I follow all the details of your description, but the simple answer to your situation would be to give the body tag an ID, and make the ID attribute editable. That way you could use the following styles for your background images:

     

    #image1 .mainbackground {

        background-image: url(images/image1.jpg);

    }

    #image2 .mainbackground {

        background-image: url(images/image2.jpg);

    }

     

    and so on.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 21, 2012 10:27 AM   in reply to David_Powers

    I don't think you need a body ID for this. Embedded CSS code trumps external style sheets.  So if your Template has an editable region in the <head> tag, you should have no trouble adding unique backgrounds to individual pages.

     

    <style type="text/css">

     

    .mainbackground {

    background-image: url(page2-BG.jpg);

    }

     

    </style>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 21, 2012 2:00 PM   in reply to fourwhitesocks

    If your Template has embedded CSS within the <head> tags, and the <head> has an editable region defined, you should be able to change styles in child pages.

     

    TEMPLATE CODE:

     

    <head>

     

    <style type="text/css">

    .mainbackground { }

    </style>

     

    </head>

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

    <!-- TemplateEndEditable -->

     

     

    CHILD PAGE CODE:

     

    <head>

     

    <style type="text/css">

    .mainbackground {

    background-image:url(page2-BG.jpg)

    }

    </style>

     

    </head>

     

     

    Give it a try.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 21, 2012 6:25 PM   in reply to fourwhitesocks

    Add your style between the editable region:

     

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

    <!-- TemplateEndEditable -->

     

    Not below it.

     

    Message was edited by: Web Magi

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 21, 2012 9:05 PM   in reply to fourwhitesocks

    So the following solution does not allow you to edit the CSS as needed?:

    Editable-Head-Region.jpg

     
    |
    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