คุณสมบัติ CSS background-position property ใช้สำหรับตั้งค่าตำแหน่งเริ่มต้นสำหรับภาพพื้นหลัง相对กับต้นทาง (origin)
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ CSS background-position property มีดังนี้:
Selector { background-position: /*value*/ }
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ CSS background-position property:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> div { margin: 30px; padding: 100px; background-image: url("https://www.tutorialspoint.com/images/C-programming.png"), url("https://www.tutorialspoint.com/images/Swift.png"), url("https://www.tutorialspoint.com/images/xamarian.png"); background-repeat: no-repeat; background-position: 15% 20%, top, right; border: 1px solid; } </style> </head> <body> <div> </div> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> p { margin: 20px; padding: 80px; background-image: url("https://www.tutorialspoint.com/images/dbms.png"), url("https://www.tutorialspoint.com/images/Operating-System.png"); background-repeat: no-repeat; background-position: 0 0, bottom right; background-color: lemonchiffon; } </style> </head> <body> <p>This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. </p> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
