HTML and CSS Reference
In-Depth Information
To add the border image:
◗
1.
Return to the
effects.css
file in your text editor.
◗
2.
At the bottom of the file, insert the following style rule as shown in Figure 8-31:
/* Border image style */
article img {
border-width: 10px;
-o-border-image: url(“borderimg.png”) 50 repeat;
-moz-border-image: url(“borderimg.png”) 50 repeat;
-webkit-border-image: url(“borderimg.png”) 50 repeat;
border-image: url(“borderimg.png”) 50 repeat;
}
figure 8-31
Adding a border image
sets the width of the
b
order to 10 pixels
cuts 50-pixel-wide border slices
from the
borderimg.png
file;
tiles the top, right, bottom, and
left side images
◗
3.
Save your changes to the file.
◗
4.
Reload
treebook.htm
in your Web browser. As shown in Figure 8-32, a torn paper
border image appears around the main photo in the page.
