Zwei Hintergrundbilder mit repeat klappt nicht

Status
Nicht offen für weitere Antworten.

byoern

Grünschnabel
Hallo,

ich bin noch neu im Umgang mit CSS und viel HTML-Erfahrung habe ich auch nicht, aber ich hoffe ihr könnt helfen.

ALSO: Ich möchte zwei unterschiedliche Bilder, einmal oben mit "repeat-x" und einmal links mit "repeat-y" auf einer Seite einbinden, doch bekomme ich es hiermit nicht hin.
Code:
body{
    	padding : 0;
    	margin : 0;
    	background-image : url(images/bg_senk.gif);
    	background-repeat :repeat-y;
    }
auch wenn ich den gleichen Ausdruck nochmal schreibe, es wird immer nur eine Wiederholung angezeigt, aber nie beide Bilder am oberen und linken Rand gleichzeitig.

Wäre toll, wenn ihr mir den Code geben könntet. Die Seite soll mit CSS gestaltet werden, also ohne Frames, oder Tabellen. Hab schon gegoogelt, aber nichts brauchbares gefunden, was ich verstehen würde.

Vielen Dank und Grüße
Björn
 
du kannst leider per CSS nur einen Hintergrund per Element definieren. Workaround wäre ein zweites freischwebendes Element, in das du den 2. Hintergrund setzt.
 
Hier ein Beispiel für einen solchen Workaround (getestet in IE 6, FF 1, NS 7.1):
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"><head>
<meta http-equiv="Content-Type"
    content="application/xhtml+xml; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
body {
    margin:0;
    padding:0;
    background:#fff url('left.gif') repeat-y;
}
#top {
    margin:0;
    padding:0;
    background:#fff url('top.gif') repeat-x;
    width:100%;
    height:54px;
}
#content {
    margin:-54px 0 0 0;
    padding:0px;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="content">
Top sollte die H&ouml;he vom Hintergrund haben, content das gleiche als negativen margin.
Das kann nat&uuml;rlich entsprechend variert werden, wenn die Hintergundbilder nicht vom Text
&uuml;berdeckt werden sollen.
</div>
</body>
</html>
 
Hi,

@hpvw: danke für die super Antwort! hat genau so geklappt! Habe die Sachen teilweise in die css datei getan, da alle Seiten von mir darauf zugreifen sollen!

Vielen Dank, und bis bald
Björn
 
Status
Nicht offen für weitere Antworten.
Zurück