2 Replies Latest reply on Dec 2, 2008 1:38 AM by Newsgroup_User

    adding multiple background images to html page

    anthony561fl
      Im trying to design a page that will have multiple backgrounds. Instead of having one large background image, Id like to use 4 smaller cutouts to keep file size to a minimum. The background will have small tiled images, same tile effect, but different colors for each background corner section of page.
      I dont have a way to attach an image, but for arguments sake, left top quadrant will have red, right top quadrant will have yellow, lower left quadrant will have black, and lower right quadrant will have white. inside these colors will be lines that I can crop and have tiled.
      This would be for background only.
      Any suggestions on how to accomplish this? Is there a css value that can be applied to position each background area? Im kinda new to html and css and trying to break out of the box. Thanks.
        • 1. Re: adding multiple background images to html page
          Level 7
          The current version of CSS does NOT support multiple background images on
          any single element. You will probably have to re-think your design.

          If you produce a comp of the page, upload it and post a link perhaps we can
          give you some suggestions

          --

          Walt


          "anthony561fl" <webforumsuser@macromedia.com> wrote in message
          news:gh1d1r$2kh$1@forums.macromedia.com...
          > Im trying to design a page that will have multiple backgrounds. Instead of
          > having one large background image, Id like to use 4 smaller cutouts to
          > keep
          > file size to a minimum. The background will have small tiled images, same
          > tile
          > effect, but different colors for each background corner section of page.
          > I dont have a way to attach an image, but for arguments sake, left top
          > quadrant will have red, right top quadrant will have yellow, lower left
          > quadrant will have black, and lower right quadrant will have white. inside
          > these colors will be lines that I can crop and have tiled.
          > This would be for background only.
          > Any suggestions on how to accomplish this? Is there a css value that can
          > be
          > applied to position each background area? Im kinda new to html and css and
          > trying to break out of the box. Thanks.
          >
          >


          • 2. Re: adding multiple background images to html page
            Level 7
            "anthony561fl" <webforumsuser@macromedia.com> wrote in message
            news:gh1d1r$2kh$1@forums.macromedia.com...
            > Im trying to design a page that will have multiple backgrounds. Instead of
            > having one large background image, Id like to use 4 smaller cutouts to
            > keep
            > file size to a minimum. The background will have small tiled images, same
            > tile
            > effect, but different colors for each background corner section of page.
            > I dont have a way to attach an image, but for arguments sake, left top
            > quadrant will have red, right top quadrant will have yellow, lower left
            > quadrant will have black, and lower right quadrant will have white. inside
            > these colors will be lines that I can crop and have tiled.
            > This would be for background only.
            > Any suggestions on how to accomplish this? Is there a css value that can
            > be
            > applied to position each background area? Im kinda new to html and css and
            > trying to break out of the box. Thanks.

            The only current way I know of to accomplish this would be to use absolute
            positioning for the bottom images. Current browsers do not reliably position
            images from the bottom of the body, and they cannot do more than one on the
            body tag. (I believe the next version of CSS supports that.)

            Here's a quick example using absolute positioning:

            http://www.pactumweb.com/_test/background_test.php

            Works on all the browsers listed on the page.
            --
            Tim G.
            http://www.pactumweb.com
            http://www.shortordersite.com

            Be smart: http://www.pactumweb.com/client/tips.php