HTML and CSS Reference
In-Depth Information
A relative URI is a path (source or link) that is relative to the document it is within. When you added the relative
URI
../images/bg-body.jpg
in styles.css, you told the browser to go up one directory (denoted by
../)
in-
to the
images
directory and then use the image bg-body.jpg from there.
Following are a few rules when using relative URIs:
• Links to resources in the same directory should consist only of the filename and file extension:
bg-
body.jpg
• Links to subdirectories consist of the subdirectories' names (without a preceding slash), followed by the file-
name and extension:
images/bg-body.jpg
• To go up a directory, use two full stops (dots or periods) followed by a slash, then the subdirectory (if re-
quired), and then the filename and file extension:
../images/bg-body.jpg
You may have noticed I refer to a
URL
and a
URI.
What's the difference? You might be sorry you asked, but I hope
this explanation clears up matters! The name
URL
means Uniform Resource Locator and, as the CSS specification
states, the
url()
function requires a URI (Uniform Resource Identifier) as its argument. A URL and URN (Uniform
Resource Name) are subclasses of a URI (they can be both referred to as URIs). However, a URN has no use in
CSS, so although it's technically true that the
url()
function does take a URI as its argument, only a URL is of
use (hence the function being called
url()
rather than
uri()
). This distinction is not necessarily something you
need to be concerned about, but you may have been curious!
background-repeat
Initial value:
repeat
| Inherited: No | Applies to: All | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
When you applied the background image to the body in Chapter 3, as you saw, that image was only 40px × 40px, but
the browser repeated the image to make it fill the whole body. This is the default behavior of a background image,
but by using the
background-repeat
property, you can change that.
Add a background image to the newsletter form:
1.
In styles.css, find the
#newsletter
rule set and add the following:
background-image: url(“../images/icon-newsletter.png”);
2.
Save styles.css.
Figure 5-12 shows that the little image of the envelope has repeated across the entire newsletter box. Looks a bit
over the top, doesn't it?