it-swarm.com.de

Kann ich mit CSS mehrere Hintergrundbilder haben?

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

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 möchte?

313
Rudd Zwolinski

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 dies 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;
}
377
nickf

Die einfachste Möglichkeit, zwei verschiedene Hintergrundbilder in einem Div zu verwenden, besteht in der folgenden Codezeile:

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

Natürlich muss dies nicht nur für den gesamten Inhalt der Website gelten, sondern kann auch für jedes beliebige Div verwendet werden.

Ich hoffe, das hilft! In meinem Blog gibt es einen Beitrag, der 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 .

34
TheLibzter

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, um jede Bildposition mit Hintergrundposition anzupassen: und die Wiederholungseigenschaft mit Hintergrundwiederholung: für jedes Bild einzeln festzulegen

24
code.rider

Die aktuelle Version von FF und IE und 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/mehrere-hintergründe-und-grenzen-mit-css2 /

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

13
Shannon

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

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

4
Mike B

Wenn Sie möchten, dass sich mehrere Hintergrundbilder überschneiden, 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>
4
rachel
#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>

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

2
Rinku

Sie könnten ein Div für den oberen Bereich mit einem Hintergrund und ein anderes für die Hauptseite haben und den Seiteninhalt zwischen ihnen trennen oder den Inhalt in einem schwebenden Div auf einer anderen Z-Ebene platzieren. Die Art und Weise, wie Sie es tun, mag funktionieren, aber ich bezweifle, dass es in jedem Browser funktioniert, dem Sie begegnen.

1
Sean James