Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Member undoIT's Avatar
    Join Date
    Jan 2007
    Posts
    70
    Member #
    14704
    I've searched for an answer to this question and haven't come up with anything yet. Using background repeat in CSS I am able to make a seemingly solid area with an image that is only a few pixels in width or height. For example, as a background to the content area in the new layout for Themebot, I set background: repeat-y, and the dimensions for the image are 994px by 1px.

    I am assuming that cropping the background image down to 1px in height will use the least bandwidth to load since the image is as small as possible. However, I'm wondering how the image is repeated. This must be done on the visitors computer and I'm wondering if this would create any issues with users who have slow computers. Are there any advantages to having the height be 10px or larger as opposed to just 1px? Will the page seeming load faster if a larger image is being repeated?

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    I believe that the repeating image is a function of the browser, not your server.
    So, you are correct in loading the smallest image possible and repeating using CSS.

    Once the image is cached on the visitor's PC, their browser takes care of the
    repeating part, not using any bandwidth for that.

    How browsers render CSS is apparent when designing a website for both IE and FF.
    You'll discover differences between IE and FF that can become frustrating. That's
    why I believe the repeat is done with the browser. Both browsers do the repeat
    equally well, but extending columns to equal heights is not the same between
    IE and FF (that's just one example).

    Design for FireFox and make it look right on IE later on.


  4. #3
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    Repeating backgrounds should be the least of your problems when it comes to performance. Honestly, these things take very little CPU time, such that it's negligible on even the old Pentium 100MHz CPUs, let alone today's multi-core CPUs. In fact, if you use a table, you use a lot more CPU time to render it. Same goes for divs, although divs take less CPU time than tables.
    Hyperair

  5. #4
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    I would estimate that the processing time required to parse a single DIV element would equal to the difference in time needed to tile a 10x1 image and a 1x1 image. So don't worry.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    http://themebot.com/templates/themebot2/img/bg_mid.png

    Would definitely work better at 1px high.

    The delay in rendering is due to the way browsers render HTML documents - they don't render the BG images until the entire document is loaded and displayed, because it's not until that moment that the website knows exactly how big the BG will be.

    A great way to improve rendering speed is specify width and height attributes on all non-bg images in your document. This will allow the browser to know exactly how big they will be displayed rather than defaulting to the image size, which requires waiting until they are loaded before they can be rendered.

    Another thing you can do is "preload" BG images with a javascript in the head of your doc that loads images using the document.images collection. This gets executed prior to the rendering of the body of the doc, so it will set your BG images to load first, instead of the default of loading last.

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    tables are bad, but especially bad with IE.
    IE won't display the table until it's loaded.

    About Transio's message:
    another reason to specify your image sizes ...
    the page will render properly before your eyes
    instead of having paragraphs jumping around
    while it loads. It just plain looks better.


  8. #7
    Member undoIT's Avatar
    Join Date
    Jan 2007
    Posts
    70
    Member #
    14704
    I actually did some not so scientific testing and couldn't tell a difference in load time or CPU usage for the 1px high background vs. the 100px high background. Taking that and all the comments into consideration, it seems that it is best practice to just size backgrounds 1px high, at the very least you can be sure they are optimized in terms of file size. Lots of good info. Thanks everybody!

  9. #8
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    Glad to be of service.
    Hyperair


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

css is bg repeat slow

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:34 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com