Zwei Hintergründe übereinander mit CSS

Question

Ich habe ein Div, das ich zwei Hintergründe auf es anwenden möchten. Im Grunde habe ich ein kleines Bild, das alle über die div wiederholt werden, und eine andere große (keine Wiederholungen). Ich habe versucht, zwei Divs der gleichen Größe zu machen, die übereinander gelegt werden, und hier ist der CSS-Code, der funktioniert, aber ich möchte es auf eine modernere Weise tun.

.science_wrap{
background-image: url(../bg/graph-paper-background.png);
width:100%;
height: 694px;
margin: 0 auto;

}

.science {
background-image: url(../bg/prospectus-science-line.png);
width:100%;
height: 694px;
margin: 0 auto;

}

Auch ich habe eine andere Div, die einen Streifen auf der Oberseite haben wird (ich habe ein bg-Bild für es) und ich möchte auf es ein anderes Bild, alle Tipps oder Tricks, dies zu tun setzen?

Answer 1

Css3 bietet die Möglichkeit für mehrere Hintergründe:

http://www.w3.org/TR/2005/WD-css3-background-20050216/#layering

Ältere Browser unterstützen jedoch kein css3. Insbesondere IE8 und darunter unterstützen es nicht - IE9 schon.

Sie können verwenden css3pie um die Unterstützung für css3 in älteren Versionen des IE zu erzwingen, aber es kann ein wenig langsam sein und hat einige Fehler.

Wenn Sie den IE6 unterstützen müssen, ist es meiner Meinung nach am besten, Ihre bisherige Methode weiter zu verwenden.

EDITAR:

Die Syntax wird etwa so aussehen:

background-image: url(../bg/graph-paper-background.png), url(../bg/prospectus-science-line.png);
background-repeat: no-repeat, repeat-y;

Answer 2

Sie können dazu Pseudo-Elemente wie :after oder :before verwenden: http://jsfiddle.net/JUsXx/

Oder Sie können mehrere CSS3-Hintergründe verwenden: http://www.css3.info/preview/multiple-backgrounds/ (Live-Beispiel: http://jsfiddle.net/JUsXx/1/ )

Answer 3

CSS Pseudo's :before und :after werden Ihnen hier helfen. Sie sind auch kompatibler als die multiplen Hintergründe von CSS3.

.science_wrap {
   background-image: url(../bg/graph-paper-background.png);
   width:100%;
   height: 694px;
   margin: 0 auto;
}

.science_wrap:before {
    content:'';
    display:block;
    background-image: url(../bg/prospectus-science-line.png);
    width:100%;
    height: 694px;
}