6 Replies Latest reply on Sep 2, 2008 4:16 AM by Newsgroup_User

    How do I keep the body background-image centered?

    afriendofcheese Level 1
      I have a body background-image that does not fill up the entire window on the tops and bottoms of most monitors (it strectches to the left and right just fine) and so I would like to have it centered vertically with equal amounts of the background-color #ECE5C8.
      I assumed using background-position: 50% 50% would do the trick and it does until switching to full screen mode and all the content jumps upwards and messes up the whole site layout (IE only-in friefox, the background-image still doesn't center) so instead I have the background-position set to: 50% 0%.

      Thanks a million to anyone who can help me get it centered, I know there has to be an easy fix but I sure can't figure it out! The site can be found here:
      http://www.lightspacewebdesign.com/sacredsolas
        • 1. Re: How do I keep the body background-image centered?
          Level 7
          I guess I don't understand what you are describing. The page looks and
          behaves the same for me in both IE7 and FF2x. The background is centered on
          the *PAGE*, not in the browser viewport. But at wider viewport widths, the
          background image does not tile to fill the screen to the edges of the width.
          What is it you want to have happen?

          By the way, your whole approach is flawed - increasing text size in the
          browser causes your center text content to overflow the central area and
          produces a mess. It's generally not considered a best practice to just
          overlay text on a background image like that for that very reason.

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


          "afriendofcheese" <webforumsuser@macromedia.com> wrote in message
          news:g9hfoq$31o$1@forums.macromedia.com...
          >I have a body background-image that does not fill up the entire window on
          >most
          > monitors and would like to have it centered with equal amounts of the
          > background-color as #ECE5C8.
          > I assumed using background-position: 50% 50% would do the trick and it
          > does
          > until switching to full screen mode and all the content jumps upwards and
          > messes up the whole site layout (IE only-in friefox, the background-image
          > still
          > doesn't center) so instead I have the background-position set to: 50% 0%.
          >
          > Thanks a million to anyone who can help me get it centered, I know there
          > has
          > to be an easy fix but I sure can't figure it out! The site can be found
          > here:
          > http://www.lightspacewebdesign.com/sacredsolas
          >

          • 2. Re: How do I keep the body background-image centered?
            afriendofcheese Level 1
            Thanks for pointing that out about the text. I did have the text set up inside a div, but the div was set up incorrectly. Changing a few values fixed that problem.

            As far as my original question, I did not specify, and I should have (will go back and edit now) that I want it to be centered *vertically* within the background color. The width is fine as the image stretches pretty far, but it's the top and bottoms on the background-image I want to have filled with the background-color. That way, on larger monitors, all of the content will be centered vertically, not flush with the top of the browser window and all the
            background-color on the bottom only. Does this make sense?
            • 3. Re: How do I keep the body background-image centered?
              Level 7
              > Thanks for pointing that out about the text. I did have the text set up
              > inside
              > a div, but the div was set up incorrectly. Changing a few values fixed
              > that
              > problem.

              You cannot "fix" that problem this way. At best, as your text expands it
              will just disappear beneath the bottom margin of the div. The problem that
              needs to be fixed is your rigid layout scheme that cannot allow flexibility.

              > I want it to be centered *vertically* within the
              > background color

              This is not easy to achieve without using Frames, and to use frames to
              achieve this would be tragic.

              > Does this make sense?

              Yes, unfortunately. I can't agree with this layout scheme. Sorry....

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


              "afriendofcheese" <webforumsuser@macromedia.com> wrote in message
              news:g9hv9i$iiv$1@forums.macromedia.com...
              > Thanks for pointing that out about the text. I did have the text set up
              > inside
              > a div, but the div was set up incorrectly. Changing a few values fixed
              > that
              > problem.
              >
              > As far as my original question, I did not specify, and I should have (will
              > go
              > back and edit now) that I want it to be centered *vertically* within the
              > background color. The width is fine as the image stretches pretty far,
              > but
              > it's the top and bottoms on the background-image I want to have filled
              > with the
              > background-color. That way, on larger monitors, all of the content will
              > be
              > centered vertically, not flush with the top of the browser window and all
              > the
              > background-color on the bottom only. Does this make sense?
              >

              • 4. Re: How do I keep the body background-image centered?
                afriendofcheese Level 1
                By "a rigid layout scheme that cannot allow flexibility" I assume you mean that everything shouldn't be bound inside the position of the background-image, but this is what the designer and client gave me to work with.and so I have to make due.

                With that in mind, I hope someone out there can help me out with this!
                • 5. Re: How do I keep the body background-image centered?
                  Level 7
                  >>so I have to make due.

                  No, you don't "have to", that is the merely the choice you have made for
                  now. Another choice, the one I prefer, is to sit with the client and explain
                  that is just not how web pages work. A web page is not a piece of paper. It
                  will find it's size depending on a multitude of variables, some out of the
                  web designer's control, for example a visitor who increases their text size.

                  On the web the visitor is king, not the designer or even the website owner.
                  The more rigid the visitor's experience, the more the site forces on them
                  the greater the likelihood they will leave quickly and never return. Sadly
                  many graphics designers, used to the perfection and certainty of the printed
                  page, cannot or will not recognize that reality and insist on forcing their
                  artistic vision on the visitor.

                  Your client has a clear choice: Force the visitor to accede to their
                  (client's) wishes or accommodate the visitor. The second has a far greater
                  chance of retaining visitors on the site long enough to make the sale, turn
                  them into a client, whatever. Isn't that the real goal?


                  --

                  Walt


                  "afriendofcheese" <webforumsuser@macromedia.com> wrote in message
                  news:g9i2hl$lmn$1@forums.macromedia.com...
                  > By "a rigid layout scheme that cannot allow flexibility" I assume you mean
                  > that
                  > everything shouldn't be bound inside the position of the background-image,
                  > but
                  > this is what the designer and client gave me to work with.and so I have to
                  > make
                  > due.
                  >
                  > With that in mind, I hope someone out there can help me out with this!
                  >


                  • 6. Re: How do I keep the body background-image centered?
                    Level 7
                    There would be only two ways to make this layout 'work'.

                    1. Just make everything on that page a graphic. Then there is no
                    possibility that resizing the text in the browser will blow the layout.
                    This is a very bad idea for obvious reasons.

                    2. Have the text containing 'graphical box' built in pieces so that as the
                    text expands, it can cause the box to expand as well. The easiest way to do
                    this is with a top a middle and a bottom image of the box, using each as the
                    background image of three stacked containers. Place the text in the middle
                    container and as it expands, it will tile the middle background image
                    vertically to give the impression of the box expanding. This approach
                    doesn't lend itself to your background image, since there is no way to tile
                    the background image to fill the newly created space.

                    Beyond that, I think you are a dead duck. The problem is not that this is
                    what you were given to work with - it's that you didn't understand how
                    unusable the design was when you accepted it. I think your best option now
                    is to go back to the designer and explain to them how this lovely layout
                    only works well in print, and not on the web. Show them how it fails.
                    Solicit suggestions from them for how to make it work in a medium where
                    there is no way to control the size of the text.

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


                    "afriendofcheese" <webforumsuser@macromedia.com> wrote in message
                    news:g9i2hl$lmn$1@forums.macromedia.com...
                    > By "a rigid layout scheme that cannot allow flexibility" I assume you mean
                    > that
                    > everything shouldn't be bound inside the position of the background-image,
                    > but
                    > this is what the designer and client gave me to work with.and so I have to
                    > make
                    > due.
                    >
                    > With that in mind, I hope someone out there can help me out with this!
                    >