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

 

The material on this site (LittleWebHut.com) is for educational purposes only. We make no warranty or guarantee of the accuracy or reliability of information contained herein or at other sites to which we link.  The risk from using this site, the information contained herein, or the sites to which we link lies entirely with the user.  By using this site, you agree to have read and accepted our Terms of Use and Privacy Policy.