Hallo zusammen,

ich habe eine, für Webdesigner höchstwahrscheinlich grauselige, Frage zum Thema Background und repeat-x bzw. repeat-y. Und zwar möchte ich auf einer Seite ein Bild am oberen Rand nach rechts wiederholen, d.h. mit repeat-x und hinter diesen Background eine weitere Grafik laden, die sich sowohl nach rechts als auch nach unten wiederholt.

body {
background: url(img/bg.jpg) repeat-x;

(doch wie den zweiten Background einfügen; und wie diesem zuweisen, dass der hinter dem ersten Background liegt?)

Mein Gefühl sagt mir, dass dies ein großes, wie wir Sachsen zu sagen pflegen, Kuddelmuddel ist, aber vielleicht hat einer von euch eine Lösung für mein Problem. Könnte man es eventuell sogar schöner lösen? Sorry, meine eigentliche Arbeit liegt in anderen Bereichen.

Danke für eure Hilfe,
Marcel

Hallo Marcel,

also ich würde jetzt spontan den großen background, der nach unten und nach rechts soll als standard background nehmen und den sozusagen kleineren background, der sich ja nur nach rechts wiederholen soll, als background ner tabelle mit width=100% am beginn der seite einfügen.

Gibt definitiv bessere Lösungen

Grüße aus Sachsen, nach Sachsen

Wieso denn Tabelle? Wenn schon, dann wenigstens einfach zwei DIV verschachteln.

Divs sind zwar guddi, aber für so einfache sachen nehm ich da doch lieber ne tabelle, warum würdest du zum div greifen?

Grüße

Da Du an einer Stelle immer bloß einen background sehen kannst, kannst Du die gesamte Fläche auch einfach (per table oder per div) in zwei Teile aufteilen.

Damit liegen die backgrounds nebeneinander, nicht übereinander.

Oder Du definierst den größeren background (der, der nach unten gehen soll) für das body-Element, den kleineren als background einer entsprechend schmalen Tabellenzeile.

Das Zusatzmerkmal repeat spielen da keine Rolle, das setzt man eben mit dazu, wo man es braucht.

Ganz einfach:

Weil table mindestens das erzeugt:

<table><tr><td></td></tr></table>

und ein div:

<div></div>

Warum den Code unnötig aufblähen? Einem Div kann man die selben CSS Eigenschaften geben wie einer Tabelle.

leg zwei div layer übereinander

zur veranschaulichung:

so, und dann knallst du in html rein: