image_background.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
  4. <style>
  5. body {
  6. font-family: sans-serif;
  7. font-size: 10pt;
  8. }
  9. img {
  10. margin: 15px;
  11. height: 120px;
  12. padding: 5px;
  13. border: 10px dotted red;
  14. background-color: green;
  15. background-image: url(images/dokuwiki-128.png);
  16. }
  17. p.c1 { background-image: url(images/dompdf_simple.png); background-repeat: repeat-x; background-position: 100px 50%; }
  18. p.c2 { background-image: url(images/php.gif); background-position: bottom center; background-repeat: repeat-y; }
  19. </style>
  20. </head>
  21. <body style="background-color: #eee;">
  22. Images with background-color, background-image, border, margin and padding
  23. <img src="images/php.gif" />
  24. <img src="images/dompdf_simple.png" />
  25. <img src="images/dompdf_simple.png" style="background-repeat: no-repeat;" />
  26. <img src="images/php.gif" style="background-repeat: no-repeat;" />
  27. <h1>Lorem ipsum dolor sit amet</h1>
  28. <p class="c1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at
  29. odio vitae libero tempus convallis. Cum sociis natoque penatibus et
  30. magnis dis parturient montes, nascetur ridiculus mus. Vestibulum purus
  31. mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
  32. massa quis velit. Curabitur metus massa, semper mollis, molestie vel,
  33. adipiscing nec, massa. Phasellus vitae felis sed lectus dapibus
  34. facilisis. In ultrices sagittis ipsum. In at est. Integer iaculis
  35. turpis vel magna. Cras eu est. Integer porttitor ligula a
  36. tellus. Curabitur accumsan ipsum a velit. Sed laoreet lectus quis
  37. leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
  38. justo. Ut pellentesque ante in neque.</p>
  39. <p class="c2">Curabitur ut diam eu dui vestibulum pharetra. Nam pellentesque, justo
  40. non hendrerit venenatis, mi orci pretium mi, et vehicula leo arcu quis
  41. diam. Nullam mattis laoreet quam. Morbi mollis sem ut tellus. Nam mi
  42. massa, lobortis eu, sollicitudin et, iaculis et, massa. Maecenas purus
  43. mauris, luctus sit amet, pharetra in, facilisis sit amet, elit. Nullam
  44. vel erat tempus purus molestie suscipit. <span>Vestibulum odio lorem,
  45. sollicitudin non, volutpat sit amet, tincidunt vel, nunc. Nulla quis
  46. ante vestibulum odio feugiat facilisis. Proin lorem nisl, viverra at,
  47. rhoncus quis, semper nec, mi. Donec euismod enim vitae velit</span>. Nulla
  48. sed lectus. Vivamus placerat, lacus sed vehicula sagittis, arcu massa
  49. adipiscing lorem, bibendum luctus nisl tortor vitae leo.</p>
  50. <p class="c1">Etiam a mauris. Proin justo elit, accumsan sit amet, tempus et,
  51. blandit id, tellus. Morbi varius, nisi id iaculis aliquam, lacus
  52. ligula facilisis velit, ac pharetra ipsum augue a massa. Etiam rhoncus
  53. commodo orci. Mauris ullamcorper sagittis turpis. Nullam magna libero,
  54. sagittis sed, auctor faucibus, accumsan vitae, urna. Pellentesque
  55. volutpat. Aliquam sapien ipsum, eleifend nec, imperdiet vitae,
  56. consectetuer id, quam. Donec a urna. Suspendisse sit amet
  57. velit. Curabitur quis nisi id dui viverra ornare. Sed condimentum enim
  58. quis tortor. Ut condimentum, magna non tempus tincidunt, leo nibh
  59. molestie tellus, vitae convallis dolor ante sed ante. Nunc et
  60. metus. Phasellus ultricies. Fusce faucibus tortor sit amet mauris.</p>
  61. <p class="c2">Aliquam enim. Duis et diam. Praesent porta, mauris quis pellentesque
  62. volutpat, erat elit vulputate eros, vitae pulvinar augue velit sit
  63. amet sem. Fusce eu urna eu nisi condimentum posuere. Vivamus sed
  64. felis. Duis eget urna vitae eros interdum dignissim. Proin justo eros,
  65. eleifend in, porttitor in, malesuada non, neque. Etiam sed
  66. augue. Nulla sit amet magna. Lorem ipsum dolor sit amet, consectetuer
  67. adipiscing elit. Mauris facilisis. Curabitur massa magna, pulvinar a,
  68. nonummy eget, egestas vitae, mauris. Quisque vel elit sit amet lorem
  69. malesuada facilisis. Vestibulum porta, metus sit amet egestas
  70. interdum, urna justo euismod erat, id tristique urna leo quis
  71. nibh. Morbi non erat.</p>
  72. <p class="c1">Cras fringilla, nulla id egestas elementum, augue nunc iaculis nibh,
  73. ac adipiscing nibh justo id tortor. Donec vel orci a nisi ultricies
  74. aliquet. Nunc urna quam, adipiscing molestie, vehicula non,
  75. condimentum non, magna. Integer magna. Donec quam metus, pulvinar id,
  76. suscipit eget, euismod ac, orci. Nulla facilisi. Nullam nec
  77. mauris. Morbi in mi. Etiam urna lectus, pulvinar ac, sollicitudin eu,
  78. euismod ac, lectus. Fusce elit. Sed ultricies odio ac felis.</p>
  79. </body>
  80. </html>