3 Replies Latest reply on Feb 14, 2010 4:38 PM by Nancy OShea

    Loading background first?

    danbenner Level 1

      Im working on a single page site that is fairly long and has quite a few jpegs.

       

      Is there a hack or way to load the background image somewhat fast? It's about 1000x500 and then repeats down the page.

       

      I've been told and have experienced that background images load last.

        • 1. Re: Loading background first?
          Nancy OShea Adobe Community Professional & MVP

          The real issue is that huge background images take up excess bandwidth and take forever to load on slow connections.  And they won't appear at all on some mobile devices. A high price to pay for eye candy.  Why must your background image be so huge???

           

          Best to use small seamless images and repeat horizontally and vertically.  Or use a scaled down background image and center it on your screen.

          More on Backgrounds.

          http://alt-web.com/Backgrounds.shtml

           

           

           

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

          1 person found this helpful
          • 2. Re: Loading background first?
            danbenner Level 1

            Thanks for the input and assumptions.  Mobile is not a concern because of my target audience and 'eye candy' is a concern due to the nature of the site.

             

            The 'real issue' is that I have been told background images load last even though it may be first in code. The nature of HTML is that the background image won't start to load until the last line is read.

             

            What I am specifically asking: is there a way to make or force the background image to load first? (just one question mark works and saves space)

             

            IF there is a workaround to not load a background image and still have a background image another way, my inital image is 1000x500. I can then repeat a strip off the bottom of 1000x10 or something.

             

            Anyone know any workarounds?

            • 3. Re: Loading background first?
              Nancy OShea Adobe Community Professional & MVP

              IF there is a workaround to not load a background image and still have a background image...

               

              Use a compatible solid background-color in your body or division.  When the background-image finally gets around to loading (varies by browsers), your solid color will be replaced by the image.

               

              body {

              background: #EAEAEA url(your-BG.jpg) repeat;

              }

               

              In addition, you might benefit from using an image sprite. One image file instead of many has the advantage of loading faster because there are fewer HTTP server-requests.

               

              http://alt-web.com/DEMOS/CSS-Sprites.shtml

               

              http://css-tricks.com/css-sprites/

               

              Best of luck,

               

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