Più sfondi con sfondo

Sto cercando di creare uno sfondo di pagina con una sovrapposizione utilizzando il supporto di più sfondi dello css3;Più sfondi con sfondo

html, body { 
    background: url('https://github.com/jaysalvat/vegas/raw/master/overlays/01.png') repeat, 
       url('http://farm8.staticflickr.com/7260/7502004958_595bf03fbf_z.jpg') top left no-repeat; 
    background-size: cover; 
}

voglio l'immagine fotografica di sfondo a "coprire" la pagina e la sovrapposizione per essere piccolo (3 * 3px) ripetendo pagina foro.

L'esempio precedente mi dà http://jsfiddle.net/tpmD4/ (anche la sovrapposizione che copre la pagina).

Come posso risolvere il problema?

Quando provo a specificare lo background-size per entrambe le immagini (background-size: 3px 3px, cover;); quindi lo sfondo dell'immagine non copre, ma la sovrapposizione funziona.

fonte

2012-07-13 Mattias

Non so se quello che stai cercando di fare è possibile, ma sembra che dovrebbe essere il più avrebbe senso di essere in grado di specificare il proprietà di sfondo per ogni immagine. Pensa solo che posso pensare di fare un div con larghezza e altezza 100% e posizionare la seconda immagine di sfondo su quel div. –

Questa pagina suggerisce che dovrebbe funzionare: http://www.css3.info/preview/background-size/ ---- #examplen { larghezza: 580 px; altezza: 200px; background-image: url (img/sheep.png), url (img/sheep.png), url (img/betweengrassandsky.png); background-repeat: no-repeat; posizione-sfondo: 20px 100px, 400px 50px, centro sotto; background-color: #EEE; dimensioni-sfondo: 70px, auto, copertina; } –

Okey Penso anche che dovrebbe essere posible, ho pensato alla tua idea ma sto solo cercando di evitare il secondo div se è posible .. thx! – Mattias

Qui si va:

html, body { 
    background-image: url(01.png), url(z.jpg); 
    background-repeat: repeat, no-repeat; 
    background-position: 0 0; 
    background-size: 3px 3px, cover; 
}

http://jsfiddle.net/tpmD4/6/

fonte

2012-07-13 10:40:09

Grazie mille funziona benissimo! – Mattias

Ovviamente, non vuoi che una sola piccola immagine copra tutto lo sfondo, vuoi ripeterlo alla giusta dimensione! Grazie mille per questo! –

Potrebbe essere qualcosa di rotto nell'ultima versione di chrome, ma le proprietà di dimensione e posizione di sfondo non stanno facendo nulla per me. Gli sfondi separati da virgola funzionano comunque bene. – Gopherkhan

Più sfondi con sfondo

risposta

Problemi correlati