Hallo ins Forum,
ich habe zum testen mal folgende kurze HTML Datei gemacht
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Background</title>
<style type="text/css">
body {
background-color: #c8c8c8;
background-image: url(bgBody.jpg);
background-position:0 20em;
background-repeat:repeat-x; }
p.unten {
position:absolute;
top:20em;
left:0px;
margin:0;
padding:0;}
</style>
</head>
<body>
<h1>Test background-position</h1>
<p>Hier sollte der Hintergund eigentlich noch grau sein</p>
<p class="unten">--------- Hier soll der blaue Hintergund anfangen und nach unten weiter gehen ----------</p>
</body>
</html>
Ich möchte, dass das blaue Hintergrundbild (10x10px) nicht nur auf der x-Achse, sondern auch auf der y-Achse kachelt. Aber erst ab den 20em nach unten.
Mit fixen Angaben in Pixel wäre das kein Problem, aber ich erstelle ein elastisches Layout, in dem alle Größen in em notiert. Ein einfaches
background: repeat kachelt leider auch nach oben.
CSS 3 background-size möchte ich aktuell noch nicht einsetzen.
Das Beispiel ist hier online
Hat jemand ne Idee, wie ich das realisieren kann?