Displaying Images

You can use several properties with images:

  • background-image Sets a background image. Set this to a URL.

  • background-repeat Specifies whether the background image should be tiled. You can set this to repeat , repeat-x , repeat-y , or no-repeat .

  • background-attachment Specifies whether the background scrolls with the rest of the document.

  • background-position Sets the initial position of the background. Specify an x and y coordinate here (where the origin is at the upper left), such as background-position: 0% 100% to add a background image to the lower left.

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.css
 TITLE {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.

graphics/09fig12.gif

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.css
 TITLE {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.

graphics/09fig13.gif



Real World XML
Real World XML (2nd Edition)
ISBN: 0735712867
EAN: 2147483647
Year: 2005
Pages: 440
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net