Box mit 2 Hintergrundbildern (oben links und unten rechtes)
.box {
background: url(image_top.png) left top no-repeat, url(image_bottom.png) right bottom no-repeat;
background-color: #999;
}
Box mit Hintergrundbild und Farbverlauf
.box {
background: url(image.png) left top no-repeat, #f1e767 center no-repeat;
background: url(image.png) left top no-repeat, -moz-linear-gradient(top, #f1e767 0%, #ff4300 100%);
background: url(image.png) left top no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1e767), color-stop(100%,#ff4300));
background: url(image.png) left top no-repeat, -webkit-linear-gradient(top, #f1e767 0%,#ff4300 100%) center bottom no-repeat;
background: url(image.png) left top no-repeat, -o-linear-gradient(top, #f1e767 0%,#ff4300 100%);
background: url(image.png) left top no-repeat, -ms-linear-gradient(top, #f1e767 0%,#ff4300 100%);
background: url(image.png) left top no-repeat, linear-gradient(top, #f1e767 0%,#ff4300 100%);
}
Box mit Hintergrundbild und Farbverlauf in Transparenz
.box {
background: url(image.png) left top no-repeat, -moz-linear-gradient(top, rgba(255,67,0,1) 0%, rgba(241,231,103,0) 100%) center no-repeat;
background: url(image.png) left top no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,67,0,1)), color-stop(100%,rgba(241,231,103,0))) center no-repeat;
background: url(image.png) left top no-repeat, -webkit-linear-gradient(top, rgba(255,67,0,1) 0%,rgba(241,231,103,0) 100%) center no-repeat;
background: url(image.png) left top no-repeat, -o-linear-gradient(top, rgba(255,67,0,1) 0%,rgba(241,231,103,0) 100%) center no-repeat;
background: url(image.png) left top no-repeat, -ms-linear-gradient(top, rgba(255,67,0,1) 0%,rgba(241,231,103,0) 100%) center no-repeat;
background: url(image.png) left top no-repeat, linear-gradient(top, rgba(255,67,0,1) 0%,rgba(241,231,103,0) 100%) center no-repeat;
}
Sonne mit Hintergrundfarbverlauf und Sonnenstrahlen als Bilddatei
.box {
background: url(strahlen.png) center no-repeat, -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #C4A714 100%);
background: url(strahlen.png) center no-repeat, -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #C4A714 100%);
background: url(strahlen.png) center no-repeat, -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #C4A714 100%);
background: url(strahlen.png) center no-repeat, -webkit-gradient(radial, center center, 0, center center, 510, color-stop(0, #FFFFFF), color-stop(1, #C4A714));
background: url(strahlen.png) center no-repeat, -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #C4A714 100%);
background: url(strahlen.png) center no-repeat, radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #C4A714 100%);
}
Beispiel aus dem Artikel
.box {
width: 500px;
height: 300px;
background: url(wp_logo.png) 186px 50px no-repeat, url(wp_text.png) 50px 190px no-repeat, #fefcb0;
background: url(wp_logo.png) 186px 50px no-repeat, url(wp_text.png) 50px 190px no-repeat, -moz-linear-gradient(top, #fefcb0 0%, #fffed9 100%) top no-repeat;
background: url(wp_logo.png) 186px 50px no-repeat, url(wp_text.png) 50px 190px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcb0), color-stop(100%,#fffed9)) top no-repeat;
background: url(wp_logo.png) 186px 50px no-repeat, url(wp_text.png) 50px 190px no-repeat, -webkit-linear-gradient(top, #fefcb0 0%,#fffed9 100%) top no-repeat;
background: url(wp_logo.png) 186px 50px no-repeat, url(wp_text.png) 50px 190px no-repeat, -o-linear-gradient(top, #fefcb0 0%,#fffed9 100%) top no-repeat;
background: url(wp_logo.png) 186px 50px no-repeat, url(wp_text.png) 50px 190px no-repeat, -ms-linear-gradient(top, #fefcb0 0%,#fffed9 100%) top no-repeat;
background: url(wp_logo.png) 186px 50px no-repeat, url(wp_text.png) 50px 190px no-repeat, linear-gradient(top, #fefcb0 0%,#fffed9 100%) top no-repeat;
}