✔ Rahmen aus Bildern erstellen

[draft]

Hallo Leute,

Ich versuche dynamisch aus kleinen Bildern einen Rahmen um einen Text zu legen.
Dabei soll der Rahmen aus folgendem bestehen:
-Ecke oben Links, oben Rechts, unten Links, unten Rechts
-Rand oben/unten
-Farbe im Inhalt.
Mein 1. Versuch sieht wie folgt aus, allerdings wird images/oben.jpg schon garnicht mehr angezeigt.

#rahmen1 {
  background-image: url(images/linksoben.jpg), url(images/oben.jpg), url(images/rechtsoben.jpg);
  background-repeat: no-repeat,repeat-x,no-repeat;
  padding: 10px;  
}

Weiß einer von euch ne Lösung, bzw. kennt einer ein Tutorial, das das Thema gut erklärt, und auch so, wie ich es brauch?

mfg Tom

Edit: Ich versuche es ähnlich wie hier zu machen: http://www.diablo-3.net/

 

[chmee]

Da multiple backgrounds erst seit CSS3 drin sind, ist es mir natürlich auch neu. Wenn ich auf anderen Beispielseiten schaue, fehlt Dir die Positionierung.

http://www.internet-magazin.de/ratgeber/das-background-und-border-modul-von-css3-1105305.html
http://www.css3.info/preview/multiple-backgrounds/
http://www.w3.org/TR/css3-background/#layering
http://www.zenelements.com/blog/css3-background-images/

mfg chmee

 

[SpiceLab]

CSS3 stellt zum "Rahmen aus Bildern erstellen" eigens die border-image-Eigenschaft bereit, die derzeit noch nicht von allen aktuellen Browsern interpretiert wird.

Zu deinem gezeigten Code (CSS3 Multiple Backgrounds): ich vermisse darin die background-position-Regel - vermutlich der Browser auch

 

[draft]

#rahmen1 {
	
  background-image: url(images/linksoben.jpg), url(images/oben.jpg), url(images/rechtsoben.jpg);
  background-position: top left,top center,top right;
  background-repeat: no-repeat,repeat-x,no-repeat;
  padding: 10px;
}

code etwas angepasst. allerdgins wird nun rechtsoben, nicht wirklich rechtsoben im eck, sondern eine zeile darunter angezeigt :/

 

[SpiceLab]

Im ersten Wert ist die horizontale, und im zweiten die vertikale Position zu deklarieren - siehe background-position (Hintergrundposition).

 

[draft]

angepasst:

#rahmen1 {
  background-image: url(images/linksoben.jpg), url(images/oben.jpg), url(images/rechtsoben.jpg);
  background-position: left top,center top,right top;
  background-repeat: no-repeat,repeat-x,no-repeat;
  padding: 10px;
}

sorry edit:
also es wird nun richtig angezeigt, allerdings ist rechtsoben HINTER oben, dadurch sieht rechtsoben nicht richtig, wie kann ich es in den Vordergrund holen?

edit2:
angepasst, der obere Rahmen geht nun:

#rahmen1 {
  background-image: url(images/linksoben.jpg),  url(images/rechtsoben.jpg),url(images/oben.jpg);
  background-position: left top,right top,center top;
  background-repeat: no-repeat,no-repeat,repeat-x;
  padding: 10px;
}

 

[SpiceLab]

Darf man das mal online betrachten?

Und welcher Browser ist involviert?

 

[draft]

hab die Seite leider nur offline, da ich ständig was noch am ändern bin, ich lade aber gleich ein jpeg hoch. Momentan steht nur alles was im Hintergrund läuft, am Design bin ich Momentan. Ich mach nur eben die Box fertig, (hab den Dreh raus ), dann up ich ein link ich ein Bild und poste den Code dafür (für den Rahmen).

 

[SpiceLab]

Kleine Demo-/Testseiten lassen sich jederzeit bei Bedarf als Anschauungsmaterial für Hilfeleistende im Forum auf den Server laden, und nach erfolgreichem Abschluß der Aufgabenstellung wieder löschen ;-)

Und wozu jetzt noch der Um-/Aufstand, hier ein Dia des Fehlers zu verlinken, wenn's doch gelöst ist, und du den Dreh raus hast? Auf "Retro"-Kram steh ich eh nicht so :suspekt:

Als Autor das Thema als erledigt markieren, das kannst du nun

 

[draft]

Lösung des Problems:

#rahmen1 {
  background-image: url(images/linksoben.jpg),  url(images/rechtsoben.jpg),
  url(images/untenlinks.jpg), url(images/untenrechts.jpg),
  url(images/oben.jpg),url(images/rand.jpg),url(images/rand.jpg),url(images/oben.jpg);
 
  background-position: left top,right top,left bottom,right bottom,center top,left,right,center bottom;
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-y,repeat-y,repeat-x;
  padding: 30px;
}

danke euch für die Denkanstöße bis zu nächsten Problem