Posso avere più immagini di sfondo usando i CSS?

È ansible avere due immagini di sfondo? Ad esempio, mi piacerebbe avere una ripetizione dell’immagine nella parte superiore (ripetizione-x) e un’altra ripetizione sull’intera pagina (ripetizione), in cui quella su tutta la pagina è dietro quella che si ripete in alto.

Ho scoperto che posso ottenere l’effetto desiderato per due immagini di sfondo impostando lo sfondo di html e del corpo:

html { background: url(images/bg.png); } body { background: url(images/bgtop.png) repeat-x; } 

È questo “buono” CSS? C’è un metodo migliore? E se volessi tre o più immagini di sfondo?

CSS3 permette questo tipo di cose e sembra così:

 body { background-image: url(images/bgtop.png), url(images/bg.png); background-repeat: repeat-x, repeat; } 

Le versioni correnti di tutti i principali browser ora la supportano , tuttavia se hai bisogno di supportare IE8 o versioni successive, il modo migliore per aggirare il problema è di avere delle div aggiuntive:

  
content here
 body{ background-image: url(images/bg.png); } #bgTopDiv{ background-image: url(images/bgTop.png); background-repeat: repeat-x; } 

Il modo più semplice che ho trovato per utilizzare due diverse immagini di sfondo in un div è con questa linea di codice:

 body { background:url(image1.png) repeat-x, url(image2.png) repeat; } 

Ovviamente, questo non deve essere solo per il corpo del sito Web, è ansible utilizzarlo per qualsiasi div desiderato.

Spero possa aiutare! C’è un post sul mio blog che parla di questo un po ‘più in profondità se qualcuno ha bisogno di ulteriori istruzioni o aiuto – http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one- div .

Usa questo

 body { background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png); background-repeat: no-repeat, repeat-x, repeat-y; background-position:10px 20px , 20px 30px ,15px 25px; } 

un modo semplice per regolare ogni posizione dell’immagine con la posizione dello sfondo: e impostare la proprietà di ripetizione con ripetizione dello sfondo: per ogni immagine individualmente

La versione corrente di FF e IE e alcuni altri browser supportano più immagini di sfondo in una singola dichiarazione CSS2. Guarda qui http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ e qui http://www.quirksmode.org/css/multiple_backgrounds.html e qui http: / /nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Per IE, potresti prendere in considerazione l’aggiunta di un comportamento. Guarda qui: http://css3pie.com/

Sì, è ansible ed è stato implementato dal popolare sito di test di usabilità Silverback . Se si guarda attraverso il codice sorgente si può vedere che lo sfondo è composto da più immagini, poste l’una sopra l’altra.

Ecco l’articolo che dimostra come si può trovare l’effetto sulla vitamina . Un simile concetto per avvolgere questi strati di “buccia di cipolla” può essere trovato su A List Apart .

Se vuoi più immagini di sfondo ma non vuoi che si sovrappongano, puoi usare questo CSS:

 body { font-size: 13px; font-family:Century Gothic, Helvetica, sans-serif; color: #333; text-align: center; margin:0px; padding: 25px; } #topshadow { height: 62px width:1030px; margin: -62px background-image: url(images/top-shadow.png); } #pageborders { width:1030px; min-height:100%; margin:auto; background:url(images/mid-shadow.png); } #bottomshadow { margin:0px; height:66px; width:1030px; background:url(images/bottom-shadow.png); } #page { text-align: left; margin:62px, 0px, 20px; background-color: white; margin:auto; padding:0px; width:1000px; } 

con questa struttura HTML:

 > 
 #example1 { background: url(http://sofit.miximages.com/css/img_flwr.gif) left top no-repeat, url(http://sofit.miximages.com/css/img_flwr.gif) right bottom no-repeat, url(http://sofit.miximages.com/css/paper.gif) left top repeat; padding: 15px; background-size: 150px, 130px, auto; background-position: 50px 30px, 430px 30px, 130px 130px; } 
 < !DOCTYPE html>     

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Si può avere un div per la parte superiore con uno sfondo e un altro per la pagina principale, e separare il contenuto della pagina tra di loro o mettere il contenuto in un div fluttante su un altro livello z. Il modo in cui lo fai potrebbe funzionare, ma dubito che funzionerà su tutti i browser che incontri.