Web developers ใช้ CSS background-position property เมื่อต้องการปรับ starting position ของ background image บทความนี้จะมาดู background-position property และการปรับเพื่อเปลี่ยนตำแหน่งภาพ
Syntax
Syntax ของ background-position property ภายใน CSS selector:
background-position: value
มีหลายวิธีประกาศ value:
- Keyword pair values:
- left top
- left center
- left bottom
- right top
- right center
- right bottom
- center top
- center center
- center bottom
คำแรก = horizontal (x) axis คำที่สอง = vertical (y) axis ถ้าระบุค่าเดียว y-value ตั้งเป็น 'center' อัตโนมัติ
- x%, y%: ระบุได้สูงสุด 2 ค่า หนึ่งสำหรับ horizontal position บน x-axis หนึ่งสำหรับ vertical position บน y-axis ถ้าระบุค่าเดียว y% = 50% (center บน y-axis) Left top = 0% 0%, top right = 100% 0%, bottom left = 100% 0% และ bottom right = 100% 100%
- xpos, ypos (ใน px/rem/em/pt): คล้ายสองวิธีข้างต้นแต่ใช้ CSS units แทน percent (ผสมได้) ถ้าไม่มีค่าที่สอง ypos = 50%
ตัวอย่างแสดงค่าต่างๆ ด้วยวิธีแรก:
Top Left:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Top Left</title> <style> body { background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: top left; display: flex; flex-flow: row wrap; } div { height: 200px; width: 25%; background: transparent; border: 5px double ivory; margin: 20px; } #text-block { background: ivory; border: 5px double black; display: flex; align-items: center; justify-content: center; font-size: 2rem; } </style> </head> <body> <div> </div> <div> </div> <div> </div> <div> </div> <div id="text-block"> top left </div> <div> </div> <div> </div> <div> </div> <div> </div> <script src="script.js"> </script> </body> </html>
Center Right:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Center Right</title> <style> body { background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center right; display: flex; flex-flow: row wrap; } div { height: 200px; width: 25%; background: transparent; border: 5px double ivory; margin: 20px; } #text-block { background: ivory; border: 5px double black; display: flex; align-items: center; justify-content: center; font-size: 2rem; } </style> </head> <body> <div> </div> <div> </div> <div> </div> <div> </div> <div id="text-block"> center right </div> <div> </div> <div> </div> <div> </div> <div> </div> <script src="script.js"> </script> </body> </html>
Bottom Left:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Bottom Left</title> <style> body { background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: bottom left; display: flex; flex-flow: row wrap; } div { height: 200px; width: 25%; background: transparent; border: 5px double ivory; margin: 20px; } #text-block { background: ivory; border: 5px double black; display: flex; align-items: center; justify-content: center; font-size: 2rem; } </style> </head> <body> <div> </div> <div> </div> <div> </div> <div> </div> <div id="text-block"> bottom left </div> <div> </div> <div> </div> <div> </div> <div> </div> <script src="script.js"> </script> </body> </html>
สรุป
หวังว่า code editors ข้างต้นให้ความเข้าใจเกี่ยวกับ background-position property ลองเล่นดู – เปลี่ยน background image, เปลี่ยน position – ดูว่าทำได้อะไรบ้าง!
