การใช้งาน background-position จัดตำแหน่งพื้นหลังในกรณีพื้นหลังเป็นรูปภาพ
ในการใส่พื้นหลังเป็นรูปภาพเราสามารถจัดตำแหน่งของพื้นหลังได้โดยสามารถจัดให้พื้นหลังอยู่กึ่งกลางหรือจะให้อยู่ด้านซ้ายของหน้าจอหรือด้านขวาของหน้าจอก็ได้โดยใช้คำสั่ง background-position และใส่ค่าให้เป็น center หรือ left หรือ right ให้กับรูปภาพของเราได้
ตัวอย่างการจัดพื้นหลังรูปภาพให้อยู่กึ่งกลาง ดังรูปตัวอย่าง
วิธีการทำ
- สร้าง class css ในไฟล์ css มา 1 class ดังตัวอย่าง
.backgroundimg{ //.......โค้ด css........ } - เพิ่มคำสั่ง css ลงใน class ดังตัวอย่าง
.backgroundimg{ background-image: url('../img/background.jpg'); background-repeat: no-repeat; background-position: center; height: 888; } - นำชื่อ class css ไปใส่ใน class ในแท็กที่เราต้องการจะใส่พื้นหลัง ดังตัวอย่าง
<div class="container-fluid "> <div class="col-12 backgroundimg imgcenter"> <img src="/img/animalia-3208412_960_720.jpg" alt="" width="500"/> </div> </div> - รวมโค้ด
<html> <head> <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="container-fluid "> <div class="col-12 backgroundimg imgcenter"> <img src="/img/animalia-3208412_960_720.jpg" alt="" width="500"/> </div> </div> </body> </html>
ในการจัดตำแหน่งพื้นหลังที่เป็นรูปภาพจะช่วยจัดในกรณีที่รูปภาพเล็กกว่าพื้นที่ที่จะให้แสดงหรือต้องการให้พื้นหลังอยู่ตำแหน่งที่เราต้องการได้
