9 Replies Latest reply on Apr 9, 2010 5:41 AM by JoeDaSilva

    Liquid layout question

    thersher Level 1

      I want to use a photo for a background, and have it view the same across many different monitor resultions. I thought maybe liquid layout would help me accomplish this, but I'm not having any luck. Does liquid layout only apply to the container itself? A few examples of what I'm looking for are www.surfinparadise.com.au, www.carfreaks.net and www.macallanridge.com. No matter the resolution I look at these sites in, they all look the same. How can I accomplish this? I've searched the internet, but I'm not finding the information I'm looking for. I've also looked at the code and css for these sites, but I really do not have a good idea of specifically what I'm looking for in there! Thanks for the help.

        • 1. Re: Liquid layout question
          pziecina Level 6



          Do you mean the way I have done the header background image on this page - http://www.pziecina.com/holistic/index.php?

          (resized on browser resize)




          • 2. Re: Liquid layout question
            thersher Level 1

            No, it's a background image that goes all the way from the left edge of the screen to the right. It's not just a header, but a background.

            • 3. Re: Liquid layout question
              pziecina Level 6



              They are both done exactly the same, it is only a matter or where you place the closing </div>, but is this what you mean - http://www.pziecina.com/indexold.php.



              • 4. Re: Liquid layout question

                So your background image is in a div and then everything else in a div inside of that? How do I know what size to make the background image? Will the image resize itself smaller if I make it big? Thanks, this is exactly what I've been looking for!

                • 5. Re: Liquid layout question
                  tsheridan Level 1

                  I just looked at your bg image, and it's smaller. So the bg images will resize bigger or smaller depending on the screen resolution?

                  • 6. Re: Liquid layout question
                    pziecina Level 6


                    So your background image is in a div and then everything else in a div inside of that?

                    Exactly, you must make certain that you give the image a width and height of 100% in your css and not in the image tag which should have no height or width attributes.


                    As for the image size itself, this is a judgement call for the designer/developer as you must make the image a size that will not deteriorate in quality when the image is 'enlarged' this is why I decided only to use this on 'header' images and other smaller items. If the image/browser is smaller than the image then the image will resize to the smaller dimension automatically.


                    There is also another drawback to this effect in that the image will distort to fit 'unusual' browser sizes, another reason why I only use it in 'headers' etc. as I can set a min/max width/height for the element, something that cannot be done when it is used as a background for the entire browser/page.



                    • 7. Re: Liquid layout question
                      JoeDaSilva Level 4

                      None of the websites you cite as examples are doing anything complicated. They're all fixed width designs (not fluid) with a large

                      background image.


                      Here's the body background image from Macallan:




                      They're simply centering it in the body tag, and then building the site in a centered, fixed-width div.


                      The body CSS is done as so:


                      body {
                           background: #141515 url(../images/site/bg-forest.jpg) no-repeat fixed center top;
                           color: #4f401c;


                      This is a simple and commonly used method these days, you need not worry about fluid width designs (they suck) or any of methods you're exploring above.

                      • 8. Re: Liquid layout question
                        tsheridan Level 1

                        If they're all fixed width, how then is the background image resizing itself to accomodate different screen resolutions? I tried the fixed width, top-center thing and it didn't work. Is the image just that huge? I noticed that this one was 1800 px wide.

                        • 9. Re: Liquid layout question
                          JoeDaSilva Level 4

                          The images aren't resizing at all, they're moving left or right when  you resize the browser to stay centered in the body, just like you're  telling them to do with the CSS.


                          For example, look at the  background for Barack Obama's website:


                          http://www.barackobama.com/images/bgv5.jpg (1332px wide)


                          They  use the exact same technique of centering the background image in the  body tag, and then centering a DIV wrapper to line-up in the middle of  background. It's pretty easy to tell with this example how they're using the technique. This day and age it's quite acceptable to use beefy background images, though I still try to keep it to 100K or less for the poor souls stuck on dial-up.