Hintergrundfarben und -bilder - Quelltext - Cascading Style Sheets

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Hintergrundfarben und -bilder - Cascading Style Sheets - Workshop Internet-Pr&auml;senz</title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="DE" />
 <meta http-equiv="Content-Style-Type" content="text/css" />

 <meta name="description"
  content="&Uuml;bung Cascading Style Sheets. Hintergrundfarben und -bilder." />
 <meta name="keywords" content="HTML, Cascading Style Sheets" />
 <meta name="author" content="Roland Unger" />

 <style type="text/css">
 <!--
  body {
     background: #ffffdd;      /* hellgelb */
  }

  .noRepeat {
     background: url(html_css_502.gif) no-repeat;
  }

  .repeatX {
     background: url(html_css_502.gif) repeat-x;
  }

  .repeatY {
     background: url(html_css_502.gif) repeat-y;
  }

  .repeat {
     background: url(html_css_502.gif) repeat;
  }

  .bottomRight {
     background: url(html_css_502.gif) no-repeat bottom right;
  }

  .center {
     background: url(html_css_502.gif) no-repeat center;
  }

  .pxProz {
     background: url(html_css_502.gif) no-repeat 20px 50%;  /* von links - von oben */
  }

  .px {
     background: url(html_css_502.gif) no-repeat 40px 20px; /* von links - von oben */
  }

  table {
     border-collapse: collapse;
  }

  td {
     border: 1px solid #000;
     padding: 0.5em;
     height: 5em;
  }

 -->
 </style>
</head>

<body>

<h1>Workshop Internet-Präsenz</h1>

<h2>Außenrand, Rahmen, Innenabstand - Cascading Style Sheets</h2>

<p>Nachfolgende Beispiele verdeutlichen Lage und Wiederholung eines
Hintergrundbildes. In der ersten Tabellenreihe wird der Wiederholmodus
variiert; in der zweiten die lage des Hintergrundbildes (ohne
Wiederholung).</p>

<table>
 <tbody>
  <tr>
   <td class="noRepeat">background-repeat: no-repeat</td>
   <td class="repeatX">background-repeat: repeat-x</td>
   <td class="repeatY">background-repeat: repeat-y</td>
   <td class="repeat">background-repeat: repeat</td>
  </tr>
  <tr>
   <td class="bottomRight">background-position: bottom right</td>
   <td class="center">background-position: center</td>
   <td class="pxProz">background-position: 20px 50%</td>
   <td class="px">background-position: 40px 20px</td>
  </tr>
 </tbody>
</table>

</body>
</html>