repeat-x variabile

[giochiflash_web]

Ciao ragazzi,
ho la necessità di mettere lo stesso sfondo a tutti i titoli del mio sito in wordpress.
Ovviamente i titoli hanno lunghezza variabile e mi chiedevo come poter mettere uno sfondo allungabile autonomamente.

utilizzando la repeat-x andrebbe bene ma ai lati estremi vorrei inserire due immagini differenti che fungono da bordo come chiusura laterale.

Qualche consiglio?

[emnlmn]

Puoi utilizzare due contenitori, uno per le immagini laterali ed uno sovrastante con l'immagine ripetuta orizzontalmente.

[giochiflash_web]

in concreto come dovrei procedere?

Grazie

[andrew low]

Non so se è la stessa idea in altre parole, però potresti mettere :

  [img_apertura] [Scritta con repeat-x] [img_chiusura]

[mahamatt]

Originariamente inviato da giochiflash_web
Ovviamente i titoli hanno lunghezza variabile e mi chiedevo come poter mettere uno sfondo allungabile autonomamente.
utilizzando la repeat-x andrebbe bene ma ai lati estremi vorrei inserire due immagini differenti che fungono da bordo come chiusura laterale.

è difficile capire a parole, perchè potrebbero esserci vari modi concreti di procedere, e non è detto che tutti siano adatti alla tua situazione.
puoi postare un'immagine o un link di come vorresti che apparisse il tuo titolo?

[giochiflash_web]

L'immagine esatta la sto ancora elaborando.

Comunque è semplicemente una pergamena di sfondo:

sinistra (bordo-sfumato a sinistra)+centro(carta pergamenata:lunghezza variabile in base al titolo)+destra(bordo-sfumato a destra)

[emnlmn]

Provo a illustrarti una mia idea:

HTML:

...
<div id="container">
  <div id="cntleft"></div>
  <div id="cntcenter"></div>
  <div id="cntright"></div>
</div>


CSS:

...

#container {
  margin:0 auto;
  padding:0;
  overflow:visible;
}

#cntleft {
  background:url(imgleft.png) transparent right top no-repeat;
  width:"x"px
  height:"y"px
  float:left;
}

#cntcenter {
  background:url(imglcenter.png) transparent left top repeat-x;
  width:auto;
  height:"y"px;
  float:left;
}

#cntleft {
  background:url(imgright.png) transparent left top no-repeat;
  width:"x"px
  height:"y"px
  float:left;
}

Dove "x" e "y" vanno sostituite con le dimensioni delle rispettive immagini di sfondo.