5 Replies Latest reply on Feb 12, 2008 11:47 AM by Newsgroup_User

    How to Terminate a background Image

    vintagegamer
      OK, my site is HERE. Now when I added the background image to give it the 3D effect, it made the background go to the end of the browser instead of ending the DIV where the text ends and just having the background color present. It's kind of hard for me to explain but you can see it on the main page, I want the background image to end where the line for the bottom of the DIV is. I've looked for ways of doing this but I haven't come up with anything so I'm asking for your help.

      If anyone knows an easy way to keep the 3D effect without making the image fill the rest of the browser (just background color would be fine), please let me know, I would really appreciate it. Also, if it's not possible, please post here so I can give up hope.
        • 1. Re: How to Terminate a background Image
          Level 7
          If the div in question is what has the background image, then the image will
          end where the div ends. You have applied the background image to the body
          tag, though, and that's why it tiles all the way to the end of the body tag.
          There would be no way to make that background image aware that it should
          stop tiling at some other point.

          The solution would be to use an outer div container that wraps your inner
          content, but that has no assigned width so that it fills the browser
          viewport's width. Apply the background image to that container, and give it
          a center alignment. That should do it.

          --
          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
          ==================


          "vintagegamer" <webforumsuser@macromedia.com> wrote in message
          news:for0fg$f99$1@forums.macromedia.com...
          > OK, my site is http://jayne-sells.com. Now when I added the background
          > image to
          > give it the 3D effect, it made the background go to the end of the browser
          > instead of ending the DIV where the text ends and just having the
          > background
          > color present. It's kind of hard for me to explain but you can see it on
          > the
          > main page, I want the background image to end where the line for the
          > bottom of
          > the DIV is. I've looked for ways of doing this but I haven't come up with
          > anything so I'm asking for your help.
          >
          > If anyone knows an easy way to keep the 3D effect without making the image
          > fill the rest of the browser (just background color would be fine), please
          > let
          > me know, I would really appreciate it. Also, if it's not possible, please
          > post
          > here so I can give up hope.
          >

          • 2. How to Terminate a background Image
            vintagegamer Level 1
            Well, I threw a quick DIV tag around the #container DIV and now the #background DIV doesn't terminate until the end of the page either. Is there a quick CSS fix that I can put in there to make sure the background DIV doesn't go all the way down?

            I've been racking my brain on this one for about a day now and nothing comes to mind. I mean any div that has 'repeat' in it isn't going to terminate at all. I was hoping there would be a way to make it end-repeat after #(name of DIV) or something along those lines...
            • 3. Re: How to Terminate a background Image
              Level 7
              > Is there a quick CSS fix
              > that I can put in there to make sure the background DIV doesn't go all the
              > way
              > down?

              I guess I would have given that to you in the first place if such a thing
              existed.

              As far as I can see, you still have the background image on the body -

              body {
              font: 100% Verdana, Arial, Helvetica, sans-serif;
              background: #ea4443 url('/images/bg.jpg') repeat-y;
              background-position: center;
              margin: 0; /* it's good practice to zero the margin and padding of the body
              element to account for differing browser defaults */
              padding: 0;
              text-align: center; /* this centers the container in IE 5* browsers. The
              text is then set to the left aligned default in the #container selector */
              color: #000000;


              --
              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
              ==================


              "vintagegamer" <webforumsuser@macromedia.com> wrote in message
              news:fosp7b$g5e$1@forums.macromedia.com...
              > Well, I threw a quick DIV tag around the #container DIV and bow the 2nd
              > DIV
              > doesn't terminate until the end of the page either. Is there a quick CSS
              > fix
              > that I can put in there to make sure the background DIV doesn't go all the
              > way
              > down?
              >
              > I've been racking my brain on this one for about a day now and nothing
              > comes
              > to mind. I mean any div that has 'repeat' in it isn't going to terminate
              > at
              > all. I was hoping there would be a way to make it end-repeat after #(name
              > of
              > DIV) or something along those lines...
              >

              • 4. Re: How to Terminate a background Image
                vintagegamer Level 1
                oh man, it's always the things you overlook isn't it...

                I put the CSS back into the header when it wasn't working correctly and forgot to take it back out. Check it out now, it looks pretty good. The only thing is I'd like to add the same effect to the bottom of the DIV but I'm not sure how to make it visible?

                Any Ideas?

                Thanks so much for being patient!
                • 5. Re: How to Terminate a background Image
                  Level 7
                  In this case, you could just add the 'bottom cap' image, between the closing
                  </div> for the outer wrapper and </body>. Give this image the following
                  styles -

                  width:whatever it is; margin:0 auto; display:block;

                  --
                  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
                  ==================


                  "vintagegamer" <webforumsuser@macromedia.com> wrote in message
                  news:fosqs4$hqu$1@forums.macromedia.com...
                  > oh man, it's always the things you overlook isn't it...
                  >
                  > I put the CSS back into the header when it wasn't working correctly and
                  > forgot
                  > to take it back out. Check it out now, it looks pretty good. The only
                  > thing is
                  > I'd like to add the same effect to the bottom of the DIV but I'm not sure
                  > how
                  > to make it visible?
                  >
                  > Any Ideas?
                  >
                  > Thanks so much for being patient!
                  >