ตัวอย่าง
วิธีการวางตำแหน่งภาพพื้นหลัง:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติพื้นหลังตำแหน่งกำหนดตำแหน่งเริ่มต้นของภาพพื้นหลัง
Tip: โดยค่าเริ่มต้นภาพพื้นหลังถูกวางไว้ที่มุมบนซ้ายขององค์ประกอบและทำซ้ำได้ทั้งแนวตั้งและแนวนอน
| ค่าเริ่มต้น: | 0% 0% |
|---|---|
| รับการถ่ายทอด: | no |
| Animatable: | yes. Read about animatable Try it |
| เวอร์ชัน: | CSS1 |
| ไวยากรณ์ javascript: | object .style.backgroundPosition="center" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: IE8 และก่อนหน้านี้ไม่สนับสนุนภาพพื้นหลังในหลายองค์ประกอบหนึ่ง
CSS ไวยากรณ์
background-position:value;ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ | เล่น |
|---|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | ถ้าคุณเพียงระบุคำหลักหนึ่งค่าอื่น ๆ จะ "center" | เล่น " |
| x% y% | ค่าแรกคือตำแหน่งในแนวนอนและความคุ้มค่าที่สองเป็นแนวตั้ง มุมบนซ้ายคือ 0% 0% ที่มุมด้านล่างขวาเป็น 100% 100% ถ้าคุณเพียงระบุค่าหนึ่งค่าอื่น ๆ จะ 50% . ค่าเริ่มต้นเป็น 0% 0% | เล่น " |
| xpos ypos | ค่าแรกคือตำแหน่งในแนวนอนและความคุ้มค่าที่สองเป็นแนวตั้ง มุมบนซ้ายคือ 0 0. หน่วยสามารถพิกเซล (0px 0px) หรืออื่น ๆ หน่วย CSS ถ้าคุณเพียงระบุค่าหนึ่งค่าอื่น ๆ จะ 50% คุณสามารถผสม% และตำแหน่ง | เล่น " |
| initial | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น | เล่น " |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
วิธีการวางตำแหน่งภาพพื้นหลังโดยใช้ร้อยละ:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30% 20%;
}
ลองตัวเอง» ตัวอย่าง
วิธีการวางตำแหน่งภาพพื้นหลังโดยใช้พิกเซล:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 100px;
}
ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
CSS Tutorial: CSS พื้นหลัง
อ้างอิง CSS: background-image property
อ้างอิง HTML DOM: backgroundPosition property