3 Replies Latest reply on Oct 20, 2011 4:07 AM by MurraySummers

    basic question about backgrounds

    iconofsin14 Level 1

      You sometimes see pages where the main content is centered and the background falls to the side of the content, this effect works no matter what the users resolution is.

      i just want to confirm the steps you take to do this (im sure i have got it right but i want to make sure im not missing anything)

       

      1) make a background image with a blank area in the center which is as wide as the main content area, the image should be very wide in total to acomodate for any resolution which may commonly be used

      2) give the main content on the page fixed width and centering (margin left/right:auto) in CSS

      3) set the background to center with CSS

       

      it may be usefull to have the far edge of the background fade to one shade of colour, that way you can set the body tags background colour to this colour so that for people with resolutions highter than your background images width the background wont have an unprofessional looking edge.

       

      have i missed anything?

        • 1. Re: basic question about backgrounds
          MurraySummers Level 8

          this effect works no matter what the users resolution is.

           

          Just so you're clear, resolution has nothing whatsoever to do with the rendering of your page.  Any given page will look exactly the same on any resolution screen as long as the browser viewport width is held constant.  It's the viewport width that is the critical variable.

           

          1) make a background image with a blank area in the center which is as wide as the main content area, the image should be very wide in total to acomodate for any resolution which may commonly be used

          2) give the main content on the page fixed width and centering (margin left/right:auto) in CSS

          3) set the background to center with CSS

           

          You have the concept.  You may, however, have missed the idea that the background image *could* be only a few 10s of pixels tall - say 50.  It then would tile down the screen supplying the desired effect to the left/right of the page.

          • 2. Re: basic question about backgrounds
            iconofsin14 Level 1

            if the background was

             

            "only a few 10s of pixels tall - say 50.  It then would tile down the screen supplying the desired effect to the left/right of the page."

             

            then it would mean you are repeating the same image over and over

            how would you achieve the effect of the background image not appearing behind the main content this way?
            if you have one laege backgroudn image ou can have a blank or white area within the image file to cover the pages main content area,

            however if you are repeating the same 50x50 image over and over you cant stop it from rendering in the sapce that the main content occupies with CSS

            (it may be possible with javascript but i have no idea how you would do it)

            • 3. Re: basic question about backgrounds
              MurraySummers Level 8

              then it would mean you are repeating the same image over and over

               

              Yes.  Exactly.

               

               

              how would you achieve the effect of the background image not appearing behind the main content this way?

               

              Your background image would be a horizontal strip that contains left-hand gradient, middle blank (or white) area, and right-hand gradient.  The middle area is what goes under the content.  It works like a charm.  And since the image is relatively small (being only ~50px tall), even if it's 1500px wide, it's still fairly lightweight.  An image that is full-size at those dimensions would be MUCH heavier.