Kann ich mit CSS mehrere Hintergrundbilder haben?

316

Ist es möglich, zwei Hintergrundbilder zu haben? Zum Beispiel möchte ich, dass ein Bild oben wiederholt wird (Wiederholung-x) und ein weiteres auf der gesamten Seite wiederholt wird (Wiederholung), wobei sich das Bild auf der gesamten Seite hinter dem Bild befindet, das sich oben wiederholt.

Ich habe festgestellt, dass ich den gewünschten Effekt für zwei Hintergrundbilder erzielen kann, indem ich den Hintergrund von HTML und Body einstelle:

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

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

Ist das "gutes" CSS? Gibt es eine bessere Methode? Und wenn ich drei oder mehr Hintergrundbilder haben wollte?

css background-image Rudd Zwolinski
quelle

Antworten:

377

CSS3 erlaubt so etwas und es sieht so aus:

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

Die aktuellen Versionen aller gängigen Browser unterstützen dies jetzt. Wenn Sie jedoch IE8 oder niedriger unterstützen müssen, können Sie es am besten umgehen, indem Sie zusätzliche Divs verwenden:

<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
quelle
27
Die neuesten Versionen von Firefox, Chrome, Safari und Opera unterstützen mehrere Hintergründe. Es wird auch in IE9 unterstützt. en.wikipedia.org/wiki/…
Šime Vidas
4
Und wenn Sie andere Wiederholungs- / Positionseinstellungen wünschen, können Sie dies tun: css3.info/preview/multiple-backgrounds
Krisc
2
Für IE8 - IE6 können Sie PIE.js verwenden. webdesign.tutsplus.com/tutorials/htmlcss-tutorials/…
Aleš Kotnik
1
Folgt die Hintergrundgröße dieser Regel? Ich möchte, dass alle meine Hintergrundbilder die volle Höhe haben, mit Ausnahme eines davon (bei dem ich die Bildhöhe haben möchte).
Mtmurdock
Ja, die Hintergrundgröße folgt der gleichen Regel (wie alle anderen Hintergrundeigenschaften). Die Hintergrundeigenschaften (normalerweise beginnend mit dem Präfix background- und dann einer bestimmten Eigenschaft des Hintergrunds) können tatsächlich in der Hintergrundeigenschaft selbst angegeben werden. Da also mehrere Hintergrundbilder unterstützt werden, werden auch mehrere aufgelistete Eigenschaften unterstützt. Dies gilt für Größe, Position, Wiederholung usw.
Cannicide
35

Der einfachste Weg, zwei verschiedene Hintergrundbilder in einem Div zu verwenden, ist mit dieser Codezeile:

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

Das muss natürlich nicht nur für den Hauptteil der Website sein, Sie können das für jeden Div verwenden, den Sie wollen.

Ich hoffe, das hilft! In meinem Blog gibt es einen Beitrag, der etwas ausführlicher darüber spricht, wenn jemand weitere Anweisungen oder Hilfe benötigt - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one- div .

TheLibzter
quelle
Beachten Sie, dass dies nur mit Hintergrund und nicht mit Hintergrundbild
funktioniert
24

benutze das 

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

Eine einfache Möglichkeit, jede Bildposition mit Hintergrundposition anzupassen: und die Wiederholungseigenschaft mit Hintergrundwiederholung festzulegen: für jedes Bild einzeln

code.rider
quelle
13

Die aktuelle Version von FF und IE sowie einige andere Browser unterstützen mehrere Hintergrundbilder in einer einzigen CSS2-Deklaration. Schauen Sie hier http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ und hier http://www.quirksmode.org/css/multiple_backgrounds.html und hier http: / /nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Für IE können Sie ein Verhalten hinzufügen. Schauen Sie hier: http://css3pie.com/

Shannon
quelle
4

Ja, es ist möglich und wurde von der beliebten Usability-Test-Website Silverback implementiert . Wenn Sie den Quellcode durchsehen, sehen Sie, dass der Hintergrund aus mehreren übereinander angeordneten Bildern besteht.

Hier ist der Artikel, der zeigt, wie man den Effekt auf Vitamin macht . Ein ähnliches Konzept zum Umwickeln dieser "Zwiebelschalen" -Schichten finden Sie auf A List Apart .

Mike B.
quelle
4

Wenn Sie mehrere Hintergrundbilder möchten, diese sich jedoch nicht überlappen sollen, können Sie dieses CSS verwenden:

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

mit dieser HTML-Struktur:

<body 

<?php body_class(); ?>>

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

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>
Rachel
quelle
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>
Erweitern Sie das Snippet

Mit CSS3 können wir problemlos mehrere Bilder hinzufügen. Wir können hier im Detail lesen http://www.w3schools.com/css/css3_backgrounds.asp

Rinku
quelle
1

Sie können ein Div für die Oberseite mit einem Hintergrund und ein anderes für die Hauptseite haben und den Seiteninhalt zwischen ihnen trennen oder den Inhalt in ein schwebendes Div auf einer anderen Z-Ebene einfügen. Die Art und Weise, wie Sie es tun, mag funktionieren, aber ich bezweifle, dass es in jedem Browser funktioniert, auf den Sie stoßen.

Sean James
quelle