คุณสมบัติ background-position
คุณสมบัติ background-position ใช้ควบคุมตำแหน่งของภาพในพื้นหลัง
ตัวอย่าง
ลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การทำงานของคุณสมบัติ background-position ตัวอย่างนี้ตั้งตำแหน่งภาพพื้นหลังห่างจากด้านซ้าย 30 พิกเซล:
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position: 30px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
รูปแบบค่าที่ใช้ได้:
- คีย์เวิร์ด: top, bottom, left, right, center
- เปอร์เซ็นต์: 50% 50% (กึ่งกลาง)
- หน่วยความยาว: 30px 50px (แนวนอน แนวตั้ง)
- ผสมผสาน: left 20px top 10px
หมายเหตุ: ค่าเดียวจะถูกตีความว่าเป็นตำแหน่งแนวนอน ส่วนแนวตั้งจะเป็น center อัตโนมัติ
