[XHTML/CSS] Obramowanie z kilku różnych grafik

[Louner]

Mam pytanie, jak można w css i xhtml wykonać taką ramkę? :



W miejscu X chciałbym , żeby znajdowała się grafika x.jpg.

Czy to wogóle możliwe w css? Bardzo proszę o pomoc i z góry dziękuję.

[Stig]

Oczywiście, że jest to możliwe. Przykład:

Kod: Zaznacz cały

div {
float: left;
}
div#all {
width: 200px;
height: 200px;
display: block;
}
div.corner {
width: 19px;
height: 19px;
border: 1px #000000 solid;
background-image: url("x.png");
}
div#top, div#bottom {
width: 158px;
height: 19px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #808080;
} 
div#top {
background-image: url("g.png");
}
div#bottom {
background-image: url("d.png");
}
div#left, div#right {
width: 19px;
height: 158px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background-color: #C0C0C0;
}
div#left {
background-image: url("l.png");
}
div#right {
background-image: url("p.png");
} 
div#center {
background-color: #008000;
background-image: url("z.png");
width: 158px;
height: 158px;
}
...
<div id="all">
 <div class="corner"></div>
 <div id="top"></div>
 <div class="corner"></div>
 <div id="left"></div>
 <div id="center"></div>
 <div id="right"></div>
 <div class="corner"></div>
 <div id="bottom"></div>
 <div class="corner"></div>
</div>

[Louner]

Serdeczne dzięki.