• CSS Background Images

    Whenever you use an image as a background for your site, via CSS, you should check how your site appears if that image does not load, either because the file is missing, or the user has selected to turn off graphics in their browser (some people do this to ensure that pages load more quickly).

    Different browsers have different default background colours, though most default to white. So if you’ve set a dark background image, with white text overlaid, and then that image does not load, you instantly have an unreadable website.

    To get around this simply ensure that you set a background colour, before you set your background image (remember, stylesheets cascade, so order is important!)

    To do this, simply edit your CSS to look like the following:

    1
    2
    3
    4
    #wrapper {
      background-color: #000;
      background: url("images/background.jpg") no-repeat;
    }
    Share and Enjoy:
    • Digg
    • Sphinn
    • del.icio.us
    • Facebook
    • Mixx
    • Google Bookmarks

    1 responses to “CSS Background Images”


     Leave a reply