Posso avere più immagini di sfondo usando CSS?

StackOverflow https://stackoverflow.com/questions/423172

  •  05-07-2019
  •  | 
  •  

Domanda

È 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 è "buono"? CSS? C'è un metodo migliore? E se volessi tre o più immagini di sfondo?

È stato utile?

Soluzione

CSS3 consente questo genere 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 lo supportano , tuttavia se è necessario supporta IE8 o versioni precedenti, quindi il modo migliore per aggirare il problema è disporre di div extra: 

<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;
}

Altri suggerimenti

Il modo più semplice che ho trovato di usare 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 ti 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 .

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 singolarmente

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ì, è 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 su vitamina . Un concetto simile per avvolgere questi strati di "pelle di cipolla" è disponibile in 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: 

<body 

<?php body_class(); ?>>

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

  <div id="pageborders">

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


#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>

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

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.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top