7 Replies Latest reply on Nov 13, 2007 10:41 PM by Newsgroup_User

    two backgrounds on same page

    Level 7
      Good morning all,

      first of all, im not sure if this should be posted here, or on the
      dreamweaver forum, so I thought I'd try here first.

      I want to put a gradient background and drop shadow on the same page, but am
      really not sure how technically you can do that.
      This is a picture of what Im trying to reproduce
      www.fionahayward.com/test.html

      Ive google searched but have come up with nothing so far.
      Regards
      Fiona Hayward


        • 1. Re: two backgrounds on same page
          Level 7
          Fiona wrote:
          > Good morning all,
          >
          > first of all, im not sure if this should be posted here, or on the
          > dreamweaver forum, so I thought I'd try here first.
          >
          > I want to put a gradient background and drop shadow on the same page, but am
          > really not sure how technically you can do that.
          > This is a picture of what Im trying to reproduce
          > www.fionahayward.com/test.html
          >
          > Ive google searched but have come up with nothing so far.
          > Regards
          > Fiona Hayward
          >
          >

          Hi,

          Yes you can do this using CSS (an gradient image slice - you might want
          to try varying heights to get it just so!) a bit like so......

          body {
          background-color: #FFFFFF;
          background-image: url(yourimgefolderhere/bg_bodygradient.jpg);
          background-repeat: repeat-x;
          background-position: left bottom;
          }

          and then use a container div which will use your drop shadow image slice
          (which is best perhaps transparent in the middle) like so - assuming you
          want to accommodate viewers using 800x600 resolution and that you want
          the container centered.....

          #container {
          margin: 0 auto;
          width: 760px;
          background-color: #FFFFFF;
          background: url(yourimgefolderhere/bg_dropshadowwithtansparency.gif);
          background-repeat: repeat-x;
          background-position: left top;
          }

          and then your content fits inside the container div.

          HTH

          --
          chin chin
          Sinclair
          • 2. Re: two backgrounds on same page
            Level 7
            thankyou for that,
            but Im still really confused.
            I get the bit about the background gradient repeating in the body, but Im
            not sure about how the dropshadow would work repeating across the page and
            also, the gradient background changes as you go down the page, so if i
            repeated the dropshadow down the page, it wouldnt work, as the gradient
            colour changes.
            I know that probably sounds confusing, but Im not sure how else to explain
            it.

            If I used a shadow colour on one side fading into transparent for the drop
            shadow, how many browsers support transparent images? would that be too
            limiting?
            Regards
            Fiona Hayward


            • 3. Re: two backgrounds on same page
              Level 7
              Fiona wrote:
              > thankyou for that,
              > but Im still really confused.
              > I get the bit about the background gradient repeating in the body, but Im
              > not sure about how the dropshadow would work repeating across the page and
              > also, the gradient background changes as you go down the page, so if i
              > repeated the dropshadow down the page, it wouldnt work, as the gradient
              > colour changes.
              > I know that probably sounds confusing, but Im not sure how else to explain
              > it.
              >
              > If I used a shadow colour on one side fading into transparent for the drop
              > shadow, how many browsers support transparent images? would that be too
              > limiting?
              > Regards
              > Fiona Hayward

              Hi,

              I have to admit that FW is not my strong point - but I have a test up
              here - I had to make the shadow image 2000px long - got myself pretty
              confused with the different types of gif transparency, index, alpha etc
              so I've left the inner bit white ;-)

              I'm sure you could improve on this but perhaps it will give you an idea
              - there's a zip file of what I've done if you want to download.
              Hopefully someone will come in and explain the transparency thing and
              offer better advice for you :-)

              http://www.bijouwebsites.co.uk/fhtest/

              --
              chin chin
              Sinclair
              • 4. Re: two backgrounds on same page
                Level 7
                thankyou for all that effort Sinclair, i really appreciate the time you
                took.

                I have come up with something similar - I made the drop shadow a really long
                thin image and put it in a table cell (yes, i know, i can hear all the css
                purists pulling their hair out - but it was the easiest way to make all the
                columns the same height as the dropshadow image) on either side of the main
                content.
                It seems to be working well - www.fionahayward.com/meaningfulabundance
                again,
                thankyou very much
                Regards
                fiona hayward


                >
                > Hi,
                >
                > I have to admit that FW is not my strong point - but I have a test up
                > here - I had to make the shadow image 2000px long - got myself pretty
                > confused with the different types of gif transparency, index, alpha etc so
                > I've left the inner bit white ;-)
                >
                > I'm sure you could improve on this but perhaps it will give you an idea -
                > there's a zip file of what I've done if you want to download. Hopefully
                > someone will come in and explain the transparency thing and offer better
                > advice for you :-)
                >
                > http://www.bijouwebsites.co.uk/fhtest/
                >
                > --
                > chin chin
                > Sinclair


                • 5. Re: two backgrounds on same page
                  Level 7
                  Fiona wrote:
                  > thankyou for all that effort Sinclair, i really appreciate the time you
                  > took.
                  >
                  > I have come up with something similar - I made the drop shadow a really long
                  > thin image and put it in a table cell (yes, i know, i can hear all the css
                  > purists pulling their hair out - but it was the easiest way to make all the
                  > columns the same height as the dropshadow image) on either side of the main
                  > content.
                  > It seems to be working well - www.fionahayward.com/meaningfulabundance
                  > again,
                  > thankyou very much
                  > Regards
                  > fiona hayward

                  You're welcome :-)

                  Although the url you posted is a page not found - I take your word for
                  it - your mock up looked great! - I have no problems with tables - if it
                  gets the job done then - way to go ;-)

                  --
                  chin chin
                  Sinclair
                  • 6. two backgrounds on same page
                    pixlor Level 4
                    Rather than make a long thin image for a table cell...make a short one and set it as the vertically tiling background for the table cell (using CSS). That way, your table can expand in height and you'll still get the drop shadow in the cell.
                    • 7. Re: two backgrounds on same page
                      Level 7
                      The only problem with that is, because the body background is a gradient,
                      the drop shadow on the content, is not the same colour all the way down the
                      page.
                      Regard
                      Fiona Hayward

                      "pixlor" <webforumsuser@macromedia.com> wrote in message
                      news:fhe48h$7ic$1@forums.macromedia.com...
                      > Rather than make a long thin image for a table cell...make a short one set
                      > it
                      > as the vertically tiling background for the table cell (using CSS). That
                      > way,
                      > your table can expand in height and you'll still get the drop shadow in
                      > the
                      > cell.
                      >