คุณสมบัติ background-position

คุณสมบัติ background-position กำหนด ตำแหน่งของรูปภาพพื้นหลังขององค์ประกอบ ตำแหน่งสามารถกำหนดได้โดยใช้ หน่วยใด ๆ สำหรับขนาด ค่าแรกหมายถึง ระยะห่างจากซ้าย ค่าที่สอง - ระยะห่างจากด้านบน

นอกจากนี้ยังสามารถกำหนดตำแหน่งด้วยคำสำคัญ ได้ ในกรณีนี้ลำดับของค่าไม่ใช่ เรื่องสำคัญ คำสำคัญสำหรับแนวตั้ง: top, center, bottom คำสำคัญสำหรับแนวนอน: left, center, right

วิธีการใช้คำสำคัญ

เพื่อวางรูปภาพด้วยคำสำคัญ จำเป็นต้องระบุหนึ่งค่าสำหรับแนวตั้ง และหนึ่งค่าสำหรับแนวนอน ตัวอย่างเช่น หากระบุ ค่า top right รูปภาพจะอยู่ ที่ด้านบนขวา

ลำดับของคำไม่สำคัญ: สามารถเขียน top right ได้ หรือเขียน right top ก็ได้ หาก มีคำสำคัญ center - สามารถละไว้ได้ ตัวอย่างเช่น top center ก็เหมือนกับ แค่ top ส่วน center center ก็เหมือนกับแค่ center

ไวยากรณ์

cssselector {
  background-position: two values separated by a space;
}

ตัวอย่าง

โดยค่าเริ่มต้น รูปภาพพื้นหลังจะอยู่ที่มุมบนซ้าย:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ตัวอย่าง

มาวางรูปภาพพื้นหลังที่มุมบนขวากัน:

html<div id="elem"></div>

css#elem {
  background-position: top right;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ตัวอย่าง

มาวางรูปภาพพื้นหลังที่มุมล่างขวากัน:

html<div id="elem"></div>

css#elem {
  background-position: bottom right;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ตัวอย่าง

มาวางรูปภาพพื้นหลังทางด้านขวา และกึ่งกลางตามแนวตั้งกัน:

html<div id="elem"></div>

css#elem {
  background-position: right center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ตัวอย่าง

มาวางรูปภาพพื้นหลังที่กึ่งกลาง บล็อกกัน:

html<div id="elem"></div>

css#elem {
  background-position: center center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ตัวอย่าง

มาวางรูปภาพพื้นหลังที่ระยะห่าง 20px จากซ้ายและ 40px จากด้านบน:

html<div id="elem"></div>

css#elem {
  background-position: 20px 40px;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ตัวอย่าง

มาวางรูปภาพพื้นหลังที่ระยะห่าง 90% จากซ้ายและ 100% จากด้านบน:

html<div id="elem"></div>

css#elem {
  background-position: 90% 100%;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ตัวอย่าง

มาวางรูปภาพพื้นหลังที่ระยะห่าง 30px จากซ้ายและที่ด้านล่างตามแนวตั้ง:

html<div id="elem"></div>

css#elem {
  background-position: 30px bottom;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ตัวอย่าง

มาวางรูปภาพพื้นหลังที่ระยะห่าง 30px จากซ้ายและกึ่งกลางตามแนวตั้ง:

html<div id="elem"></div>

css#elem {
  background-position: 30px center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ตัวอย่าง

มาวางรูปภาพพื้นหลังที่ระยะห่าง 30px จากด้านบนและกึ่งกลางตามแนวนอน:

html<div id="elem"></div>

css#elem {
  background-position: center 30px;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ดูเพิ่มเติม