HTML and CSS Reference
By default, background-color is transparent , meaning it is see-through, allowing elements below it or
containing it to show through.
Initial value: none | Inherited: No | Applies to: All | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
background-image accepts a url() function or none as its value. As you saw in the border-image-
source explanation, the url() function takes a URI as its argument.
A URI (also referred to as a source, link, or path) within the url() function can optionally be wrapped with single
or double quotation marks. Previously, you added this style:
This style is just as acceptable written without the quotation marks and with optional whitespace inside the brackets:
background-image: url( ../images/bg-body.jpg );
The choice is yours.
You may be wondering what the two dots mean in the URI. The two types of URI you can use are relative and abso-
lute. This type is known as relative.
An absolute URI is complete and in its entirety. For example, if you want to view the image bg-body.jpg direc-
tly, in your browser, you can navigate to http://www.coolshoesandsocks.com/images/bg-
body.jpg . To make the URI of the background image apply to the body, you use the following declaration:
Avoid Hot Linking
Linking from your own web resource to another that you don't own via an absolute URI is known as hot linking. Say
I like an image I've seen on someone else's website and I make it the background image of my web page via an
absolute link. Not only may that person be upset with me because I don't have her permission to do that, but I'm
also using the bandwidth of her server. It is common that web hosting is priced based on the amount of bandwidth
a website uses, so potentially, by hot linking that image, I could be costing the person money!
If the owner of the image is kind enough to give you permission to use an image, you should upload that image to
your own server and link to it from there, ideally via a relative URI.
Absolute URIs tend to be used when you're linking to an external resource—on another domain, for example. Al-
though they can be used internally too, it is good practice to use relative URIs instead as they can make a web page
quicker to load.