5 Replies Latest reply on Sep 14, 2008 12:22 PM by Newsgroup_User

    Multiple Background Image Changes in CSS Template?

    amoncur Level 1
      Hi,

      I'm using a template to control a header background image. For the vast majority of my web pages, the same background image will be used. However, for 2 of the pages I would like to use 2 different images (i.e. there will be 3 background images total used on the website). I believe I can add a class to the body in my template like this:

      <body class="background_image2">

      and then include a body.background_image2 rule in my style sheet. This should allow me to easily switch back and forth between my image that will be used for the majority of the pages and the 2nd background image. Is there a way to include a second body class and corresponding css rule that will allow me to easily use the 3rd background image? If I wasn't using a template it would be easy as I could change the body tag on the pages in question to have whatever class I want. Since I am using a template, however, I've not been able to figure out a workaround. Any recommendations?

      Thanks so much.
        • 1. Re: Multiple Background Image Changes in CSS Template?
          Level 7
          A much simpler way would be to just put a tiny embedded stylesheet in each
          affected child page's editable region called 'head', e.g.,

          <!-- InstanceBeginEditable name="head" -->
          <style type="text/css">
          body { background:url(backgroundimage.jpg) no-repeat; }
          </style>
          <!-- InstanceEndEditable -->

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "amoncur" <webforumsuser@macromedia.com> wrote in message
          news:gaa49e$96m$1@forums.macromedia.com...
          > Hi,
          >
          > I'm using a template to control a header background image. For the vast
          > majority of my web pages, the same background image will be used.
          > However, for
          > 2 of the pages I would like to use 2 different images (i.e. there will be
          > 3
          > background images total used on the website). I believe I can add a class
          > to
          > the body in my template like this:
          >
          > <body class="background_image2">
          >
          > and then include a body.background_image2 rule in my style sheet. This
          > should
          > allow me to easily switch back and forth between my image that will be
          > used for
          > the majority of the pages and the 2nd background image. Is there a way to
          > include a second body class and corresponding css rule that will allow me
          > to
          > easily use the 3rd background image? If I wasn't using a template it
          > would be
          > easy as I could change the body tag on the pages in question to have
          > whatever
          > class I want. Since I am using a template, however, I've not been able to
          > figure out a workaround. Any recommendations?
          >
          > Thanks so much.
          >

          • 2. Re: Multiple Background Image Changes in CSS Template?
            amoncur Level 1
            Thanks for your reply.

            So does having an embedded style in my child page override the external style sheet? The background image in question is being controlled by a div id of "header". So if I create an embedded style named "header", this will override the external style sheet's "header"?

            Thanks.
            • 3. Re: Multiple Background Image Changes in CSS Template?
              Level 7
              > So does having an embedded style in my child page override the external
              > style
              > sheet?

              It would if the embedded stylesheet occurs AFTER the link to the external
              stylesheet, OR if the selector in the embedded stylesheet had a greater
              specificity than the one in the external stylesheet.

              Consider the case where the external stylesheet has this rule -

              #foo { color:red }

              and the embedded stylesheet has this rule -

              #foo { color:green; }

              If the code is like this in the page (CASE1),

              <style type="text/css">
              #foo { color:green; }
              </style>
              <link rel="stylesheet" href="external.css" type="text/css">

              then this markup - <div id="content"><p id="foo">Here is some
              text.</p></div>

              will have red text.

              If the markup is like this in the page (CASE2),

              <link rel="stylesheet" href="external.css" type="text/css">
              <style type="text/css">
              #foo { color:green; }
              </style>

              then this markup - <div id="content"><p id="foo">Here is some
              text.</p></div>

              will have green text.


              However if, in the *first* case (CASE1), you would change the selector for
              the rule in the embedded stylesheet from this -

              #foo

              to this -

              #content #foo
              (i.e., you have made it more specific, by stating that it applies to #foo
              only if it is also within #content)

              then the text will be green again.

              Can you follow that?

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "amoncur" <webforumsuser@macromedia.com> wrote in message
              news:gab9k0$kod$1@forums.macromedia.com...
              > Thanks for your reply.
              >
              > So does having an embedded style in my child page override the external
              > style
              > sheet? The background image in question is being controlled by a div id
              > of
              > "header". So if I create an embedded style named "header", this will
              > override
              > the external style sheet's "header"?
              >
              > Thanks.
              >

              • 4. Multiple Background Image Changes in CSS Template?
                amoncur Level 1
                Yup, I follow that. Thank you so much!
                • 5. Re: Multiple Background Image Changes in CSS Template?
                  Level 7
                  You're welcome. Good luck!

                  --
                  Murray --- ICQ 71997575
                  Adobe Community Expert
                  (If you *MUST* email me, don't LAUGH when you do so!)
                  ==================
                  http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  ==================


                  "amoncur" <webforumsuser@macromedia.com> wrote in message
                  news:gajkpu$56s$1@forums.macromedia.com...
                  > Yup, I follow that. Thanks you so much!