Little Web Hut
(Cascading Style Sheets) CSS 2.1 Reference

URI (Uniform Resource Identifiers) Values

URI values allow resources to be specified by using 'url( )' functional notation. The syntax is url("address"), url('address'), or url(address). The quote marks are optional but if they are not used then some characters may need to be escaped with a backslash.

Addresses can be either absolute or relative.

  • An absolute address uses the complete address. Example: url("http://www.littlewebhut.com/css/ball.gif").
  • A relative address is relative to the location of the CSS style sheet that contains the address. For the following examples, assume that the CSS style sheet is located at "http://www.littlewebhut.com/css/style.css".
    • To specify a background image named ball.gif, located in the same directory as the CSS style sheet, any one of the following can be used:
      • body {background-image: url("http://www.littlewebhut.com/css/ball.gif");} - Absolute address
      • body {background-image: url("./ball.gif");} - Relative address
      • body {background-image: url("ball.gif");} - Relative address
    • To specify a background image named ball.gif, located up one directory from the CSS style sheet at "http://www.littlewebhut.com/ball.gif" either one of the following can be used:
      • body {background-image: url("http://www.littlewebhut.com/ball.gif");} - Absolute address
      • body {background-image: url("../ball.gif");} - Relative address
    • To specify a background image named ball.gif, located down one directory from the CSS style sheet at "http://www.littlewebhut.com/css/images/ball.gif" any one of the following can be used:
      • body {background-image: url("http://www.littlewebhut.com/css/images/ball.gif");} - Absolute address
      • body {background-image: url("./images/ball.gif");} - Relative address
      • body {background-image: url("images/ball.gif");} - Relative address
    • To specify a background image named ball.gif, located at "http://www.littlewebhut.com/clipart/ball.gif" either one of the following can be used:
      • body {background-image: url("http://www.littlewebhut.com/clipart/ball.gif");} - Absolute address
      • body {background-image: url("../clipart/ball.gif");} - Relative address