Posizionamento di più immagini di sfondo

Question

Ho tre immagini di sfondo, tutte della larghezza 643 px. Voglio che essere definite in questo modo:

• immagine in alto (altezza 12px) no-repeat

• immagine centrale repeat-y

• immagine in basso (altezza 12px) nessuna ripetizione

Non riesco a vedere di farlo senza farli sovrapporre (che è un problema perché le immagini sono parzialmente trasparenti), è qualcosa di simile possibile?

background-image: url(top.png), 
        url(bottom.png), 
        url(middle.png); 

background-repeat: no-repeat, 
        no-repeat, 
        repeat-y; 

background-position: left 0 top -12px, 
        left 0 bottom -12px, 
        left 0 top 0; 

Answer 1

Il tuo problema è che il repeat-y sta per riempire l'intera altezza, non importa dove la posizioni inizialmente. Quindi, si sovrappone alla parte superiore e inferiore.

Una soluzione consiste nello spingere lo sfondo ripetuto in uno pseudo elemento posizionato fuori dal contenitore da 12px nella parte superiore e inferiore. The result can be seen here (l'opacità nella demo è solo per mostrare che non si verificano sovrapposizioni). Senza opacità, see here. Il codice in questione (testato nei browser CSS3: IE9, FF, Chrome):

CSS

div { 
    position: relative; 
    z-index: 2; 
    background: url(top.png) top left no-repeat, 
       url(bottom.png) bottom left no-repeat; 
} 

div:before { 
    content: ''; 
    position: absolute; 
    z-index: -1; /* push it to the background */ 
    top: 12px; /* position it off the top background */ 
    right: 0; 
    bottom: 12px; /* position it off the bottom background */ 
    left: 0; 
    background: url(middle.png) top left repeat-y; 
} 

Se avete bisogno o volevamo supporto IE8 (che non supporta sfondi multipli), allora si potrebbe mettere lo sfondo in alto nel div principale, e inserire lo sfondo in basso usando lo pseudo elemento div:after posizionato nella parte inferiore del contenitore.

Answer 2

Prova fare in questo modo:

background: url(PICTURE.png) left top no-repeat, url(PICTURE2.png) right bottom no-repeat, url(PICTURE3.jpg) left top no-repeat; 
    } 

EDIT: era solo un esempio, ma qui è il css con il css:

background: url(top.png) left 0px top -12px no-repeat, url(middle.png) left 0px top 0px repeat-y, url(bottom.png) left 0px bottom -12px no-repeat; 
     } 

Answer 3

Se è possibile aggiungere padding/confini al blocco pari agli sfondi che si desidera posizionare senza sovrapporsi altro blocco, è possibile utilizzare il background-clip & background-origin per posizionare gli sfondi superiore e inferiore sopra le imbottiture/confini, e la ripetizione sfondo sul contenuto/paddings + contenuto.

Ecco un esempio: http://dabblet.com/gist/2668803

per il codice, avrete probabilmente bisogno di aggiungere qualcosa di simile:

padding: 12px 0; 
background-clip: padding-box, padding-box, content-box; 
background-origin: padding-box, padding-box, content-box; 

o

border: solid transparent; 
border-width: 12px 0; 
background-clip: border-box, border-box, padding-box; 
background-origin: border-box, border-box, padding-box; 

E avrai quello hai bisogno.Se non riesci a ottenere i paddings/borders, lo pseudo-elemento come quello di ScottS menzionato funzionerebbe perfettamente.

Answer 4

Ecco un metodo che utilizza 3 div per ciascuna delle Top, Medio e inferiore immagini che sono trasparenti da applicare alla tua pagina web.

Lo sfondo è facoltativo.

Testato nei browser moderni ed è amichevole IE8.

Questo metodo permette di trattare il elemento corpo come dovrebbe essere trattato, vale a dire, la vostra pagina web markup fa non bisogno di essere in un involucro o elemento che contiene.

jsFiddle Example
jsFiddle Example with centered filled

Dal momento che l'esempio precedente utilizza posto immagine contenuti titolare che è senza trasparenza per Top e le immagini di fondo, è possibile verificare il markup lavora con trasparenza questo jsFiddle che utilizza mini icone trasparenti in modalità di ripetizione HERE.

Answer 5

L'unico modo (pratico, non minaccioso) che vedo è farlo in Javascript, quando la pagina è caricata e quando viene ridimensionata, con una dimensione della tela per adattarsi a innerHeight e alle 3 immagini: draw il primo una volta in cima, disegna il secondo il numero di volte necessario per coprire il resto della tela e disegna il terzo nella parte inferiore della tela. Posiziona la tela a 0,0 con uno z-index ridicolmente negativo.

Ho provato con 3 immagini (643 x 12, 100 e 12) e ovviamente il primo numero che ho visto è che la terza immagine viene disegnata su parte dell'ultima iterazione della seconda immagine - a meno che hai un'altezza della finestra esattamente di 12 + 12 + (p2.height * X), ​​avrai qualche sovrapposizione. Ma è previsto, giusto?

Answer 6

Penso che z-index risolverà questo perché z-index riguarda solo gli elementi CHILD, il che significa che non è possibile incasinare altro nella pagina che utilizza z-index.

superiore e inferiore immagini z-index:3;

immagine centrale z-index:2;background-repeat:repeat-y;

Answer 7

in realtà ho trovato una soluzione più semplice, perché ho avuto questo stesso problema con una navigazione orizzontale.

Piuttosto che aggiungere codice come le altre risposte, è sufficiente elencarlo in modo diverso nel CSS. L'immagine centrale che si ripete deve essere elencata per ultima, non prima o seconda.

Nel mio codice che assomiglia a questo:

background-image: url(../images/leftNav.gif), url(../images/rightNav.gif), url(../images/centerNav.gif); 
background-position: left, right, center; 
background-repeat: no-repeat, no-repeat, repeat-x; 

Answer 8

Un modo radicale ma efficace per affrontare questo, se:

1. si desidera applicare sfondi senza sovrapposizione ad una ": prima di "
2. del ": prima di" elemento come un noto altezza massima

---

&:before { 
    background: url('vertical-line.png') no-repeat 0px, 
       url('vertical-line-repeat.png') no-repeat 140px, 
       url('vertical-line-repeat.png') no-repeat 200px, 
       url('vertical-line-repeat.png') no-repeat 260px, 
       url('vertical-line-repeat.png') no-repeat 320px, 
       url('vertical-line-repeat.png') no-repeat 380px, 
       url('vertical-line-repeat.png') no-repeat 440px, 
       url('vertical-line-repeat.png') no-repeat 500px, 
       url('vertical-line-repeat.png') no-repeat 560px, 
       url('vertical-line-repeat.png') no-repeat 620px, 
       url('vertical-line-repeat.png') no-repeat 680px, 
       url('vertical-line-repeat.png') no-repeat 740px; 
}