Posso avere più immagini di sfondo usando CSS?

316

È possibile avere due immagini di sfondo? Ad esempio, mi piacerebbe avere un'immagine ripetuta in alto (ripeti-x) e un'altra ripetizione in tutta la pagina (ripeti), dove quella in 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 body:

html {
    background: url(images/bg.png);
}

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

Questo CSS è "buono"? C'è un metodo migliore? E se volessi tre o più immagini di sfondo?

css background-image

— Rudd Zwolinski
fonte

377

CSS3 consente questo tipo di cose e sembra che questo:

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 lo supportano , tuttavia se è necessario supportare IE8 o versioni precedenti , il modo migliore per aggirare il problema è disporre di ulteriori div:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

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

— nickf
fonte

27

Gli sfondi multipli sono supportati dalle ultime versioni di Firefox, Chrome, Safari e Opera. Sarà supportato anche in IE9. en.wikipedia.org/wiki/…

— Šime Vidas,

4

E se desideri avere impostazioni di ripetizione / posizione diverse, puoi farlo: css3.info/preview/multiple-backgrounds

— Krisc

2

Per IE8 - IE6, puoi usare PIE.js. webdesign.tutsplus.com/tutorials/htmlcss-tutorials/…

— Aleš Kotnik

1

La dimensione dello sfondo segue questa stessa regola? Voglio che tutte le mie immagini di sfondo siano a tutta altezza, tranne una (che voglio essere l'altezza dell'immagine).

— mtmurdock,

Sì, la dimensione dello sfondo segue la stessa regola (come tutte le altre proprietà dello sfondo). Le proprietà di sfondo (di solito a partire dal prefisso di sfondo e quindi una proprietà specifica dello sfondo) possono essere effettivamente specificate all'interno della proprietà di sfondo stessa, quindi poiché sono supportate più immagini di sfondo, sono supportate anche più proprietà elencate. Questo vale per dimensioni, posizione, ripetizione, ecc.

— Cannicida del

35

Il modo più semplice che ho trovato di utilizzare due diverse immagini di sfondo in un div è con questa riga 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, puoi usarlo per qualsiasi div che desideri.

Spero che aiuti! C'è un post sul mio blog che ne parla 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 .

— TheLibzter
fonte

Si noti che questo funziona solo con lo sfondo e non con l'immagine di sfondo

— yoel halb

24

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 di sfondo: e impostare la proprietà repeat con lo sfondo-repeat: per ogni immagine individualmente

— code.rider
fonte

13

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/

— Shannon
fonte

4

Sì, è possibile ed è stato implementato dal famoso sito Web di test di usabilità Silverback . Se guardi attraverso il codice sorgente puoi vedere che lo sfondo è composto da più immagini, posizionate una sopra l'altra.

Ecco l'articolo che dimostra come fare l'effetto può essere trovato sulla vitamina . Un concetto simile per avvolgere questi strati di "pelle di cipolla" è disponibile in A List Apart .

— Mike B
fonte

4

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:

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>

— rachel
fonte

2

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

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Espandi frammento

Possiamo facilmente aggiungere più immagini usando CSS3. possiamo leggere in dettaglio qui http://www.w3schools.com/css/css3_backgrounds.asp

— Rinku
fonte

1

Potresti 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 mobile su un altro livello z. Il modo in cui lo fai potrebbe funzionare, ma dubito che funzionerà su tutti i browser che incontri.

— Sean James
fonte