HTML and CSS Reference
In-Depth Information
background-color: #f5f5f5;
}
By default,
background-color
is
transparent
, meaning it is see-through, allowing elements below it or
containing it to show through.
background-image
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:
background-image: url(“../images/bg-body.jpg”);
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:
background-image: url(“http://www.coolshoesandsocks.com/images/bg-body.jpg”);
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.
