| background-color | ใช้กำหนดสีให้กับพื้นหลัง |
|---|---|
| background-image | ใช้กำหนดพื้นหลังเป็นรูปภาพ |
| background-repeat | ใช้กำหนดให้แสดงรูปภาพแบบวนซ้ำหรือไม่ |
| background-attachment | ใช้กำหนดว่าให้รูปภาพพื้นหลัง อยู่กับที่ หรือ เลื่อนตาม เมื่อมีการเลื่อนแถบเลื่อน |
| background-positionY | ใช้กำหนดตำแหน่งของพื้นหลัง เมื่อเทียบกับขอบด้านบน |
| background-positionX | ใช้กำหนดตำแหน่งของพื้นหลัง เมื่อเทียบกับขอบด้านซ้าย |
| background-position | ใช้กำหนดค่าของ property background-positionY และ background-positionX |
| background | ใช้กำหนดค่าต่างๆของ property background |
content:ใช้กำหนดสีให้กับพื้นหลัง
value:ชื่อสี, transparent, #ค่าสี, rgb( ตัวเลข, ตัวเลข, ตัวเลข )
example:{ background-color: rgb( 255, 0, 125); }
property:background-color
property:background-image
value:none, url(ชื่อไฟล์.นามสกุล)
content:ใช้กำหนดพื้นหลังเป็นรูปภาพ
example:{ background-image: url( image/panda.png ); }
property:background-repeat
value:repeat-x, repeat-y, repeat, no-repeat
content:ใช้กำหนดให้แสดงรูปภาพแบบวนซ้ำหรือไม่
example:{ background-repeat: no-repeat; }
property:background-attachment
value:fixed, scroll
content:ใช้กำหนดว่าให้รูปภาพพื้นหลัง อยู่กับที่ หรือ เลื่อนตาม เมื่อมีการเลื่อนแถบเลื่อน
example:{ background-attachment: fixed; }
property:background-positionY
value:top, center, bottom, ค่าเปอร์เซ็นต์, ค่า px
content:ใช้กำหนดตำแหน่งของพื้นหลัง เมื่อเทียบกับขอบด้านบน
example:{ background-positionY: 5px; }
property:background-positionX
value:left, center, right, ค่าเปอร์เซ็นต์, ค่า px
content:ใช้กำหนดตำแหน่งของพื้นหลัง เมื่อเทียบกับขอบด้านซ้าย
example:{ background-positionX: 1%; }
property:background-position
content:ใช้กำหนดค่าของ property background-positionY และ background-positionX ได้พร้อมกันตามลำดับ
example:{ background-position: 5px 1%; }
property:background
content:ใช้กำหนดค่าของ property background-color, background-image, background-repeat, background-attachment, background-position ได้พร้อมกันตามลำดับ
example:{ background: #ccff00 url(panda.gif) no-repeat fixed 5px 1%; }
