6 Replies Latest reply on Mar 16, 2010 12:41 PM by Nancy OShea

    background image

    maryn2art3

      hello, I am building one of my firsts websites and I want to put an image in the background.......

      it is tiling, stretching and changing colors..........is this not possible to do.  I am a novice so slowly please. or, if not , a gradient as well, doing the same thing......

      thanks in advance.

      Nary

        • 1. Re: background image
          pziecina Level 6

          Hi

           

          Not certain what you wish here, do you want a background image that adjusts to the browser size? A css generated gradient? Or none of these, but just a background image?

           

          For css generated background gradients, (including IE) see - http://www.pziecina.com/design/turorial_demos/background_gradients.php.

          PZ

          www.pziecina.com

          • 2. Re: background image
            maryn2art3 Level 1

            actually ...all of the above.  I am doing a website about a pool  hall .I have a photo I found of pool balls in the background and I would like it to go the entire browser height and width smoothly. If that can not be done I have done a simple gradient that also bleeds into more tiles.............a smooth finish like you were looking at a advertisement.  Thanks!

             

            Thank you,

            Mary

             

            Mary Grassell

            Graphic Designer/Web Designer

            COMTek ROTC Support Team

            720 Thimble Shoals Business Center Ste 113

            Newport News, VA 23606

            tel 1:  757-224-0472

            tel 2:  1-866-462-7682

            fax:  757-224-0484

            mgrassell@comtechnologies.com

             

             

             

            The contents of this email message and any attachments are intended solely for the addressee(s) and may contain confidential and/or legally privileged information.  If you are not the intended recipient of this message or if this message has been addressed to you in error, please immediately alert the send by reply email and then delete this message and any attachments.  If you are not the intended recipient, you are notified that any use, dissemination, distribution, copying, or storage of this message or any attachment is strictly prohibited.

            • 3. Re: background image
              pziecina Level 6

              Hi

               

              Insert the following immediately after your opening <body> -

              <div id="bg">
              <img src="your image ref here" />

               

              And the closing </div> just before the closing </body>

               

              then the following in your css -

              body #bg{
                  height:100%;
                  width:100%;
                  overflow: hidden;
              }

               

              #bg img {
                  min-height:100%;
                  min-width:100%;
              }
              #bg #outerWrapper {
                  height:100%;
                  left: 0;
                  position:absolute;
                  top: 0;
                  width:100%;
              }

               

              To see this effect - http://www.pziecina.com/indexold.php, (view the code)

               

              Although on first thoughts this may appear to be a    good idea, the fact that without a large amount of javascript code to work    out the aspect ratio for the image, then apply clipping to the image it does    not offer a good visual impression, on smaller or 'unusually' browser    sizes spoiling the effect.

               

              PZ

              • 4. Re: background image
                maryn2art3 Level 1

                Not sure where exactly to place the ???  CSS

                 

                then the following in your css -

                body #bg

                 

                #bg img {

                    min-height:100%;

                    min-width:100%;

                }

                #bg #outerWrapper

                Thank you,

                Mary

                 

                Mary Grassell

                Graphic Designer/Web Designer

                COMTek ROTC Support Team

                720 Thimble Shoals Business Center Ste 113

                Newport News, VA 23606

                tel 1:  757-224-0472

                tel 2:  1-866-462-7682

                fax:  757-224-0484

                mgrassell@comtechnologies.com

                 

                 

                 

                The contents of this email message and any attachments are intended solely for the addressee(s) and may contain confidential and/or legally privileged information.  If you are not the intended recipient of this message or if this message has been addressed to you in error, please immediately alert the send by reply email and then delete this message and any attachments.  If you are not the intended recipient, you are notified that any use, dissemination, distribution, copying, or storage of this message or any attachment is strictly prohibited.

                • 5. Re: background image
                  pziecina Level 6

                  Hi

                   

                  Place this above the </head> tag inside a style block, (which is) -

                   

                  <style type="text/css" media="all">

                  Place the css here

                  </style>

                   

                  PZ

                  • 6. Re: background image
                    Nancy OShea Adobe Community Professional & MVP

                    Not sure where exactly to place the ???  CSS

                     

                    In your external stylesheet if you have one (some-filename.css).  Or in code view, within between the <head> and </head> tags in your HTML document.

                     

                    <style type="text/css">

                    CSS code goes here

                    </style>

                     

                    How to Link External Stylesheets -

                    http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml

                     

                    Nancy O.
                    Alt-Web Design & Publishing
                    Web | Graphics | Print | Media  Specialists
                    http://alt-web.com/
                    http://twitter.com/altweb
                    http://alt-web.blogspot.com