Guten Morgen,
ich habe meinen Inhalt in einem div mit dynamische Länge untergebracht. Zur Auflockerung wollte ich je eine Grafik in die obere, linke Ecke und in die untere, rechte Ecke in den Hintergrund packen. Der Inhalt soll die Grafiken ignorieren. Damit meine ich, das der Text bei Bedarf über die Hintergrundgrafiken geschrieben wird. Eine Grafik bekomme ich angeordnet, aber bei der zweiten weiß ich nicht weiter.
Das ist mein aktueller Stand:
html:
[code]
Gruß Elsner
Tja, man könnte versuchen, daß leere Element mit dem zweitem
Hintergrund zu positionieren. Das wird aber nur machbar sein,
wenn man die gewünschte Position auch wirklich angeben kann.
Ohne es probiert zu haben, könnte man ‘inhalt’ relativ
positionieren und ‘unten-rechts’ darin absolut, zudem mit
Angaben zu Höhe und Breite, die der gewünschten Größe des
zweiten Hintergrundbildes entsprechen.
Es kann nun sein, daß man ‘INHALT’ ebenfalls in ein wiederum
relativ positioniertes Element packen muß, um mittels z-index
die Darstellungsreihenfolge so hinzudrehen, daß man den
Text wirklich sehen kann.
In der Richtung kann man erstmal experimentieren und gucken,
wo da in der jeweils konkreten Umsetzung Probleme auftreten.
Ich meine, es gibt auch die Idee, bei CSS3 mehrere
Hintergrundbilder für ein Element angeben zu können - auch da
könnte man mal recherchieren, wie man das macht und ob oder
welche browser das bereits interpretieren. Damit könnte man sich
dann das zusätzliche, leere Element sparen, ist also eine
wesentlich saubere Lösung.
Weitere CSS2-Variante - man kann es auch mit einem
SVG-Hintergrundbild probieren, in dem die beiden Hintergründe
geschickt angeordnet sind. Dazu wird man die Größe des SVG
in dem Dokument in Prozent angeben, die Positionen der Bilder
eventuell auch, wobei man deren Seitenverhältnis erhalten sollte.
Das kann eine etwas kniffligere Anwendung sein ;o)
Derzeit kann allerdings wohl nur Opera SVG als Hintergrundbild
darstellen.
Danke Hoffmann. Ich habe etwas mit deinen Vorschlägen experimentiert. Aber leider funktioniert es noch nicht.
html:
[code]
css:
.inhalt-alles {position:relative;}
.inhalt {position:relative;
z-index:2;
float:left;
width:800px;
background:url(bild1.jpg) no-repeat;
background-position:left top;
}
.unten-rechts {position:relative;
z-index:1;
height:200px;
width:200px;
background:url(bild2.jpg) no-repeat;
margin:auto 0 0 auto;
}
Bei dem oben benutztem Code ist das zweite Bild im Inhaltscontainer in der unteren rechten Ecke. Aber es wird einfach unter den Text gehängt, d.h. der Inhalt geht nicht über das Bild.
Wenn ich bei der Klasse “unten-rechts” statt position:relative position:absolute benutze, hängt das Bild unter dem Inhaltscontainer und sogar links.
Heute Abend werde ich mal eine Testseite hochladen.
Hi,
HTML:
[code]
CSS:
.inhalt {
width: 800px;
background: url('oben-links.gif') no-repeat;
background-position: left top;
position: relative;
margin-left: auto;
margin-right: auto;
}
.unten-rechts {
background: url('unten-rechts.gif') no-repeat;
background-position: right bottom;
width: 800px;
}
Perfekt hummer. Genau sowas habe ich gesucht. Die Umsetzung hat auch wunderbar funktioniert. Vielen Dank.
Gruß Elsner
Bei position: absolute müßtest du natürlich bottom und right
(oder left) angeben, damit das auch im anderen Element unten
drin bleibt.
