You can use several properties with images:
There's also a background shorthand property that you can set to the background color , image , repeat , attachment , and position all at once (list those values in order). Here's an example showing how to use a background image. In this case, I'll add a background image to appear behind text in <P> elements, making that image repeat until it fills all the space behind the <P> element. Note that you specify an URL with the url keyword: Listing ch09_18.cssTITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {background-image: url(/books/1/264/1/html/2/image.jpg); background-repeat: repeat} For this example, I'll condense all the <P> elements in our XML document into one <P> element so that the result, showing the background image, will be clearer: Listing ch09_19.xml<?xml version="1.0" standalone="yes"?> <?xml-stylesheet type="text/css" href="ch09_02.css"?> <DOCUMENT> <TITLE CLASS="RED">The Meditations</TITLE> <AUTHOR>By Marcus Aurelius</AUTHOR> <SECTION>Book One</SECTION> <P> From my grandfather, Verus, I learned good morals and the government of my temper. From the reputation and remembrance of my father, modesty and a manly character. From my mother, piety and beneficence, and abstinence, not only from evil deeds, but even from evil thoughts; and further, simplicity in my way of living, far removed from the habits of the rich. From my great-grandfather, not to have frequented public schools, and to have had good teachers at home, and to know that on such things a man should spend freely. </P> </DOCUMENT> You can see the results in Figure 9-12, where the background image does indeed appear behind the text. Figure 9-12. Displaying a background image.
What if you want to display an image by itself? In that case, you can create a dedicated element that uses the image as its background image. Here's an example. Note that I'm setting the height and width properties to the size of the image; I'm also using the float property to indicate that text should flow around the left of this element: Listing ch09_20.cssTITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display:block} IMG {background: url(/books/1/264/1/html/2/image.jpg) no-repeat center center; height: 66px; width: 349px; float: right} Here's how I add the <IMG> element to the document: Listing ch09_21.xml <?xml version="1.0" standalone="yes"?> <?xml-stylesheet type="text/css" href="ch09_20.css"?> <DOCUMENT> <TITLE CLASS="RED">The Meditations</TITLE> <AUTHOR>By Marcus Aurelius</AUTHOR> <SECTION>Book One</SECTION> <IMG></IMG> <P> From my grandfather, Verus, I learned good morals and the government of my temper. From the reputation and remembrance of my father, modesty and a manly character. From my mother, piety and beneficence, and abstinence, not only from evil deeds, but even from evil thoughts; and further, simplicity in my way of living, far removed from the habits of the rich. From my great-grandfather, not to have frequented public schools, and to have had good teachers at home, and to know that on such things a man should spend freely. </P> </DOCUMENT> You can see the results in Figure 9-13. Figure 9-13. Displaying an image.
|