Multiple Hintergründe

by Jens Grochtdreis

HTML

<div class="box">
<p>Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezeptoren Ihrer Netzhaut erfaßt. Die Zellen werden dadurch in einen Erregungszustand versetzt, der sich über den Sehnerv in dem hinteren Teil Ihres Gehirns ausbreitet. </p>
</div>

CSS

.box { 
    background-color: #efefef;
    border: 1px solid #ccc;
    background:       url(http://placehold.it/40/a20000/ffffff) no-repeat top left, 
                      url(http://placehold.it/40/fd8700/ffffff) no-repeat top right, 
                      url(http://placehold.it/40/000000/ffffff) no-repeat bottom left, 
                      url(http://placehold.it/40/ff00cc/ffffff) no-repeat bottom right,
                      #efefef;
    width: 300px;
    padding: 50px;
}

body {padding: 40px;}

JavaScript

// Die Hintergrundfarbe IMMER zuletzt definieren!