background, repeat, altezza, boxmodel.. sto impazzendo!

ntoflip

Utente Attivo
26 Ago 2008
50
0
0
Ciao a tutti, prima di postare qualcosa qui, giuro che faccio mille ricerche, ma neanche 'sta volta sono venuto a capo di un problema, per me, apparentemente semplicissimo. Per essere chiaro allego delle immagini che mi aiuteranno a spiegarmi meglio.

Allora.. io vorrei ottenere un'elemento in una pagina web che appaia come nell'immagine sfondo.jpg.. (l'immagine allegata è ridotta al 20%) questo elemento farà da contenitore di altre cose e quindi avrà un'altezza variabile, mentre la larghezza resterà sempre uguale..

Per ottenere un simile effetto ho pensato di dividere l'immagine sfondo.jpg in 8 pezzi, 4 linee da 1px che mi daranno le sfumature laterali e 4 angoli che raccorderanno tali sfumature.. Così avro ottenuto una cornice al contenuto dell'elemento. L'immagine schema_sfumature.jpg ne dovrebbe illustrare il funzionamento..
Mentre l'immagine schema_boxmodel.jpg dovrebbe rendere l'idea di come ho provato ad impostare l'elemento in html: ho un box (div) contenitore che contiene tutto (evidenziato in grigio) e al suo interno ho altri tre box (div - evidenziati in rosso) che a loro volta contengono tre box (span - evidenziati in verde) ciascuno.

Ho allegato anche un file zip che contiene gli 8 pezzi che vengono usati come background-image degli span esterni mentre quello centrale avrà una tinta unita..

Il mio problema riguarda le colonne laterali nelle quali non riesco a impostare un'altezza automatica con la loro relativa immagine che si ripete.. Se serve vi posto l'intero codice, aiutatemi per favore!!
 

Allegati

  • sfondo.jpg
    sfondo.jpg
    32,6 KB · Visite: 432
  • schema_sfumature.jpg
    schema_sfumature.jpg
    29,6 KB · Visite: 221
  • schema_boxmodel.jpg
    schema_boxmodel.jpg
    30 KB · Visite: 222
  • immagini_sfondo.zip
    6,4 KB · Visite: 130

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao
non so se ho capito bene, ma mi sembra che se tu inserissi nei div con ? immagine di sfondo (prendiamo es a destra) il tuo css dovrebbe essere (salvo errori ed omissioni)

div.conPuntoInt_a_dx{
background-image: con_sfuma_a_dx.jpg;
background-repeat:repeat-y;
background-position:right;

width:/* uguale al div sovrastante*/
/*display ecccc...*/
}

quello a sinistra simile
se ho capito male, scusa
 

ntoflip

Utente Attivo
26 Ago 2008
50
0
0
Grazie borgo, ho risolto eliminando i div laterali e mettendo un'immagine di sfondo all'elemento centrale per tuttetre le righe di divisione.. Ho diviso l'immagine in tre pezzi.. un po' più pesanti ma va bene.. così.

Il problema era che lo sfondo nei "div ?" non mi si ripeteva perchè erano vuoti.. mah?!?
 
Discussioni simili
Autore Titolo Forum Risposte Data
P Mancata estensione background-repeat sul resto della pagina oltre il primo div e/o prima tabella HTML e CSS 2
O [HTML] problemi con la regola "background-attachment: fixed" in EDGE HTML e CSS 0
L [HTML] Background-image HTML e CSS 9
A cordova-plugin-background-mode Sviluppo app per Android 0
A [HTML] Background size per dispositivi mobili HTML e CSS 4
M [Javascript] Adattare immagine di background all'altezza dello smartphone Javascript 1
asevenx [HTML] -webkit-filter solo su immagine di background HTML e CSS 5
S [WordPress] Footer php - il background riempie tutta la pagina - help WordPress 1
cornamusa [HTML] Immagine di Background HTML e CSS 1
Andrea Alessandrini [HTML] background annidati che si sovrappongono male HTML e CSS 3
S [HTML] Background responsive HTML e CSS 21
M [WordPress] [HTML] Problema immagine background respondive WordPress 21
A [HTML] background fisso che non si ridimensiona con lo zoom HTML e CSS 4
D [HTML] Sfondo-Background fisso ma non troppo con effetto in movimento HTML e CSS 4
D Persa connessione con apparecchio Bluetooth in background Sviluppo app per iOS 0
F background a tutto schermo e bottoni HTML e CSS 5
borgo italia scelta dei colori di background e colori di contrasto Snippet PHP 1
Francesco Polese PHP script sempre in background PHP 0
V Aggiungere un img nel background Sviluppo app per Android 1
ivarello Progressbar e dati background .NET Framework 1
V Background sito web HTML e CSS 1
L mailto: apre la finestra di posta in background HTML e CSS 2
V area ripetuta e cambiamento background in foto PHP 0
gandalf1959 background image sparisce e diventa visibile un testo in un div Javascript 2
gandalf1959 Background image in un div con CSS non funziona HTML e CSS 4
G Background scorrevole in una <div> jQuery 4
Y Invio email automatico database background Database 1
I Slide di immagini come background ? Javascript 0
I Slide di immagini come background ??? jQuery 1
F background image tr chrome HTML e CSS 3
voldemort [LIBRERIA] Background Mail Sviluppo app per Android 0
A inserire background con gradiente in un layout Sviluppo app per Android 1
A Modificare background flash Flash 11
Shyson Shade background non copre tutto il monitor HTML e CSS 4
F altezza background tutto schermo HTML e CSS 3
Sevenjeak [Vb.net 2010] Aiuto background worked .NET Framework 10
G Richiamare URL in Background (Nascosto) come se fosse eseguito da browser PHP 3
R Inserire un background a rotazione? HTML e CSS 1
andre9004 Jquery background-image fade (Effetto comparsa background-image) jQuery 8
D background della pagina di login Webdesign e Grafica 5
U E' possibile dividere un' immagine o un background in celle? jQuery 0
D background in tre sezioni "WordPress" HTML e CSS 0
I Problema Background HTML e CSS 2
I Script ogni secondo in background PHP 2
maxbossi [CSS] background CSS HTML e CSS 0
voldemort [CSS] Definire tutte le proprietà del background in un unica riga HTML e CSS 1
N preload background image animazione sequenza Javascript 1
A Aiuto per soggetto da scontornare dal suo background Photoshop 8
L CHAT colore messaggi di testo e colore background PHP 0
L Background musicale per tutto il sito Flash 1

Discussioni simili