5 Replies Latest reply on Dec 3, 2010 10:33 AM by Jamainiac

    Changing Background Image to a portion of a site?

    Jamainiac

      Hi! Just teaching myself how to use DW (CS3) to set up a small site for my store. I want to create separate area for my catalog and be able to easily update the background image on all catalog pages. How do I set these pages up to do so?

       

        I've had a look through the threads and don't see anything that helps!

       

        Thank You!

        • 1. Re: Changing Background Image to a portion of a site?
          MurraySummers Level 8

          People who build their own websites without any HTML experience are almost like people who act as their own lawyers.

           

          How do I set these pages up to do so?

           

          It would not be possible to answer without seeing what you have and what exactly you want to do.  Can you show us your current page and tell us where you want this background image?

          • 2. Re: Changing Background Image to a portion of a site?
            Jamainiac Level 1

            I was hoping this would a friendly environment...

             

            Just trying to let our customers find our little store!

             

            If the end of your reply was actually an offer to help...

             

            http://www.suitearrangements.com/SuiteArrangements_Armoires.html

             

            I want to create several pages for the catalog and be able to change the tiled background image to all of the pages that contain 'catalog' info.

             

              Thanks!

            • 3. Re: Changing Background Image to a portion of a site?
              martcol Level 4

              Hello,

               

              It's friendly enough.  

               

              Your background image is applied through your CSS - a good start.

               

              body {

              background-color: #585640;
              background-image: url(Photos/WinterTile.jpg);
              background-repeat: repeat;
              }

              That's your CSS rule and that will apply that to the <body> element in that page.

              If you want a different background image on different pages then you should first, put your CSS in an external style sheet.  That involves creating a .css file and linking your pages to it.

              If you want a different background on some pages then put a class on the body element in those pages like this:

              <body class="winter">

              Then you can have a CSS rule that targets only those body elements with that class.

              body.winter {
              alternative: rule;
              }

              I think that's the basic prinicple.

              If you Google arround CSS HTML you will come up with plenty of advice.

              Martin


              • 4. Re: Changing Background Image to a portion of a site?
                Jamainiac Level 1

                Thank you for the helpful reply Martin

                • 5. Re: Changing Background Image to a portion of a site?
                  MurraySummers Level 8

                  I was hoping this would a friendly environment...

                   

                  As martcol explained, it is.  But trying to build a store site without any experience with HTML is (in my opinion) a failure waiting to happen.  Remember this site will be the public face of your company....

                   

                  You have a good start for the page you have linked.  But there are some errors in your CSS -

                   

                   

                  body {

                      font: 100% Verdana, Arial, Helvetica, sans-serif;

                      background: #DEB887;

                   

                  Be aware that the "background" style is a SHORTHAND style, permitting one to specify color, image, repeat, attachment, and position of an element's background.  WHen you use this shorthand style WITHOUT specifying all of the above values, the browser will assume that they are therefore the DEFAULT values.  This could have the effect of NEGATING a previous style.  For example -

                   

                  body {

                       background-attachment:fixed;
                       background: #DEB887;
                  }

                   

                  The effect here will NOT be of a fixed background since the default for that attachment style is "scroll".

                   

                  If you are only going to specify a color for the background, you will be much safer and better off using "background-color" than "background".  You have made this mistake several times in your CSS.

                   

                  .oneColLiqCtrHdr #container {

                      width: 80%;  /* this will create a container 80% of the browser width */
                      background: 585640;

                   

                  You should also know that a properly specified hexadecimal color value ALWAYS has a leading octothorpe ("#"), otherwise it will be ignored.

                   

                  As martcol noted, since you are already using CSS, it's a simple matter to change the background image for those desired pages.