✔ Runde Rahmen und Hintergrund Bild im DIV

[BSA]

Hi Leute,

ich werde hier in letzter Zeit auch zum Dauer-Thread Ersteller im CSS Forum, schon mal sorry dafür.

Also ich hab mir in Photoshop ein Design gemacht das ich jetzt unmsetzen will, bzw. ein Inhaltselement welches ich umsetzen möchte.

Es ist ein Layer mit runden Ecken, der Code steht unten, in diesen Layer soll jetzt (am besten als Hintergrund) ein Bild positioniert werden, welches sich in die abgerundeten Ecken schmiegt, als Beispiel hier mal ein kleines Bild dazu, der graue Rahmen ist das div.

http://onlyapage.de/markus/uhr.jpg

So, nun der Code für den Layer, den ich auch auf Anraten von euch anders gestalten würde, Hauptsache ich komme zum Ziel:

.raised{background:transparent;color:#777;padding-bottom:15px;width:auto;}
.raised h1,.raised p{margin:0 15px;}
.raised h1{font-size:150%;}
.raised p{padding:10px 0;text-align:justify;}
.raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b{display:block;font-size:1px;overflow:hidden;}
.raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b{height:1px;}
.raised .b2{background:#777;border-left:1px solid #777;border-right:1px solid #777;}
.raised .b1{background:#fff;margin:0 5px;}
.raised .b2,.raised .b2b{border-width:0 2px;margin:0 3px;}
.raised .b3,.raised .b3b{margin:0 2px;}
.raised .b4,.raised .b4b{height:2px;margin:0 1px;}
.raised .b1b{background:#777;margin:0 5px;}
.raised .b3,.raised .b4,.raised .b4b,.raised .b3b,.raised .b2b{border-left:1px solid #777;border-right:1px solid #777;}
.raised .boxcontent{background:#fff;border-left:1px solid #777;border-right:1px solid #777;display:block;}

   <div class="raised">
    <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
    <div class="boxcontent">
    <h1>Überschrift</h1>
     <p>TEXT</p>
    </div>
    <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
   </div>
   <div class="inset">
    <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
    <div class="boxcontent">
    </div>
    <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
   </div>

Problem wird sein das ich das Bild dann wahrscheinlichen slicen muss.

 

[Maik]

Hi,

ich vermute, dass sich das Hintergrundbild nicht bis an den Rand von Stu Nicholls' Krazy Korners heranführen lässt.

 

[BSA]

Richtig, das was ich da benutze ist ja schon eine abgewandelte Version davon. Würde das funktionieren wenn ich auf Runde Ecken mit Bildern zurück greifen würde? Gibts nicht irgendwie sowas wo man bspw. ein Div Layer über einen anderen packt und der der drüber liegt alles das was von dem unteren über den oberen guckt wegschneidet? Nicht wirklich, oder? Das wäre mal ne coole sache!

Oder kann ich nicht einfach ein Div mit dem Hintergrundbild über das ganze legen sodass ich das Bild dann quasi abrunde (die ecken) und dann einfach das ganze auf den schon vorhandenen Rahmen positioniere?

 

[Maik]

Ich hab mich mal an einem Modell versucht, in dem die abgerundeten Ecken durch Grafiken erzeugt werden, so wie hier im Forum mit Einführung der "v6", aber ich komm da auf keinen grünen Zweig.

 

[BSA]

Das funktioniert aber, das habe ich auch schon des öfteren gesehen, ich hätte es zwar lieber ohne Grafiken gemacht, aber um auch schönere Rundungen hinzubekommen, ist es wahrscheinlich auch besser Grafiken zu benutzen, allerdings habe ich dann immer noch nicht das Problem mit der Grafik im Hintergrund geklärt, da ich die ja dann auch slicen müsste, und das ist eigentlich nicht das was ich wollte.