Layering Multiple Background Images นั้นเป็นความสามารถที่ถูกเพิ่มเข้ามาใน CSS3 โดยความสามารถนี้จะทำให้เว็บดีไซน์เนอร์ทำงานกับ Background ได้ยืดหยุ่นมากขึ้น สำหรับการใช้งานนั้นเพียงใช้เครื่องหมาย comma-separated(,) หรือเครื่องหมายจุลภาค คั่นระหว่างแต่ละ Background ที่ต้องการเรียกใช้โดยคำสั่งที่อยู่แรกจะเป็นตำแหน่งเลเยอร์บนสุด และเรียงลำดับลงไปเรื่อยๆ
**สำหรับบราวเซอร์ที่ซัพพอร์ท Layering Multiple Background Images คือบราวเซอร์ Firefox เวอร์ชั่น 3.6+ (Gecko 1.9.2), Safari เวอร์ชั่น 1.3+, Chrome เวอร์ชั่น 10+, Opera เวอร์ชั่น 10.50+ (Presto 2.5) and Internet Explorer เวอร์ชั่น 9.0+
ตัวอย่างการนำเอาพื้นหลังสองภาพมาซ้อนกัน
[css]
.examplemultiplebackgrounds {
background-image:
url(“img/sheep.png”),
url(“img/betweengrassandsky.png”);
background-position: center bottom, left top;
background-repeat: no-repeat;
height: 250px;
padding: 5px;
width: 500px;
}
[/css]
ซึ่งการใช้งานจริงสามารถเรียกใช้งานได้สองแบบ คือการเขียนแยกทีละ Properties และการเขียนย่อแบบ Shorthand แยกได้ตามตัวอย่างต่อไปนี้
ตัวอย่างการใช้งานแบบแยก Properties
[css] background-image:
url(layer-1.gif),
url(layer-2.png),
url(layer-3.jpg),
none;[/css]
*ถึงแม้จะใช้คำสั่ง None ก็ยังถือเป็นเลเยอร์เช่นกัน
สำหรับการสั่งงาน Properties อื่นๆ ก็ใช้เครื่องหมาย (,) คั่นแต่ละคำสั่งเช่นกันโดยการเรียงลำดับจะสัมพันธ์กับตำแหน่งของ background-image โดยอัตโนมัติและหากมีการสั่ง background-image สี่จำนวนแต่มีการระบุ Properties แค่สามจำนวนดังนั้นหมายความว่า background ที่ 4 จะไม่ถูกกำหนด Properties อื่นๆ ไปด้วย
แต่ในกรณีเดียวกันหากมีการกำหนด Background 3 จำนวนแต่มีการกำหนด properties อื่นๆ 4 จำนวน นั่นหมายความว่า Properties สุดท้ายจะไม่ทำงานกับ Background ตัวสุดท้ายเช่นกัน
[css] background-position:
center bottom,
left top,
right top;[/css]
ตัวอย่างการใช้งานแบบแยก Shorthand
การเขียนแบบ Shorthand นั้นสามารถเขียนโดยการเขียน Properties “background” แล้วเขียน Properties อื่นๆ แบบ Shorthand ต่อจาก Background นั้นๆ แล้วแค่ใช้ comma-separated(,) คั่นแต่ละฺ Background เอาไว้ตามตัวอย่าง
[css] background:
url(layer-1.gif) center bottom no-repeat,
url(layer-2.png) left top no-repeat,
url(layer-3.jpg) right top no-repeat;[/css]
ข้อมูลที่มาและศึกษาเพิ่มเติม
http://thaicss.com/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%87%E0%B8%B2%E0%B8%99-layering-multiple-background-images/
http://www.css3.info/preview/multiple-backgrounds/
http://www.w3schools.com/css3/css3_backgrounds.asp