Contur deosebit la imagine in pagina

[MenCar]

Salut Marplo, sti cumva un cod sau un site de unde pot lua sau downloada un cod pt site html php nu conteaza...

Despre ce este vorba...
Uitate exemplu pe:
emt2.zapto.org

Pe mine ma intereseaza marginea aceea la imagine.
Cum sa fac si eu sa imi fac asa ceva?
Astept raspuns, merci o zi buna.

Salut
La acea pagina, conturul e o imagine, aceasta:
emt2.zapto.org/img/layout/bg_up.jpg

Adaugata ca background intr-un Div pozitionat "absolute" in spatele la tot continutul ( z-index: -999; ).
Codul lor CSS pentru acel Div:

Cod: Selectaţi tot

div#bgLine {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("img/layout/bg_up.jpg");
    background-origin: padding-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto auto;
    height: 600px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -999;
}

Eu zic de marginea pe pagina, dai in sus sau in jos si acea forma in imp ramane pe marginea siteului...
Uite o imagine, ce e incercuit cu rosu:
i42.tinypic.com/rcpsub.jpg

Acel contur pe marginea paginii e facut din mai multe bucati, si anume 8 Div-uri cu "position: fixed;", in care s-a adaugat imagine pt. background.
4 Div-uri pt. colturi si 4 pt. fiecare latura.
De exemplu, pt. coltu stanga-sus e folosita imaginea de la adresa asta:
emt2.zapto.org/img/frame_ctl.png
Si acest cod css:

Cod: Selectaţi tot

#corner_tl {
  position:fixed;
  z-index:43;
  height:81px;
  width:108px;
  background-repeat:no-repeat;
  top:0;
  left:0;
  background:url("img/frame_ctl.png");
}

- Pentru latura din stanga (si dreapta) e imaginea:
emt2.zapto.org/img/frame_left.png
Si codul css:

Cod: Selectaţi tot

#frame_left {
  position:fixed;
  z-index:42;
  width:19px;
  background-repeat:repeat-y;
  height:100%;
  left:0;
  background:url("img/frame_left.png");
}

- Similar se face si pentru celelalte colturi si laturi.

Am creiat doua fisiere:

index.html (in el am bagat):

Cod: Selectaţi tot

<link href="111.css" rel="stylesheet" type="text/css" media="screen" />

111.css (in el am bagat):

Cod: Selectaţi tot

#corner_tl {
  position:fixed;
  z-index:43;
  height:81px;
  width:108px;
  background-repeat:no-repeat;
  top:0;
  left:0;
  background:url("http://emt2.zapto.org/img/frame_ctl.png");
}

#frame_left {
  position:fixed;
  z-index:42;
  width:19px;
  background-repeat:repeat-y;
  height:100%;
  left:0;
  background:url("http://emt2.zapto.org/img/frame_left.png");
}

Si nu functioneaza, oare de ce???

Tu stii de ce nu functioneaza la tine, probabil nepotrivire cu Div-urile pt. acele proprietati css.
Uite, acest cod functioneza (dar e mai bine sa folosesti pentru background imagini de pe acelasi server unde e site-ul).

Cod: Selectaţi tot

<style>
#corner_tl, #corner_bl, #corner_br, #corner_tr {
  position:fixed;
  z-index:43;
  height:81px;
  width:108px;
  background-repeat:no-repeat;
}
#corner_tl {
  top:0;
  left:0;
  background:url("http://emt2.zapto.org/img/frame_ctl.png");
}
#corner_bl {
  bottom:0;
  left:0;
  background:url("http://emt2.zapto.org/img/frame_cbl.png");
}
#corner_br {
  bottom:0;
  right:0;
  background:url("http://emt2.zapto.org/img/frame_cbr.png");
}
#corner_tr {
  top:0;
  right:0;
  background:url("http://emt2.zapto.org/img/frame_ctr.png");
}
#frame_left, #frame_right {
  position:fixed;
  z-index:42;
  width:19px;
  background-repeat:repeat-y;
  height:100%;
}
#frame_left {
  left:0;
  background:url("http://emt2.zapto.org/img/frame_left.png");
}
#frame_right {
  right:0;
  background:url("http://emt2.zapto.org/img/frame_right.png");
}
#frame_bottom, #frame_top {
  position:fixed;
  z-index:42;
  height:19px;
  background-repeat:repeat-x;
  width:100%;
}
#frame_bottom {
  bottom:0;
  background:url("http://emt2.zapto.org/img/frame_bottom.png");
}
#frame_top {
  top:0;
  background:url("http://emt2.zapto.org/img/frame_top.png");
}
</style>

<div id="corner_tl"></div>
<div id="corner_bl"></div>
<div id="corner_br"></div>
<div id="corner_tr"></div>
<div id="frame_left"></div>
<div id="frame_bottom"></div>
<div id="frame_right"></div>
<div id="frame_top"></div>