การจัดการรูปภาพด้วยคำสั่ง CSS
การนำคำสั่ง CSS มาช่วยในการจัดการรูปภาพ จะทำให้การแสดงผลรูปภาพทางสื่อการแสดงผลต่าง ๆ มีรูปแบบที่สวยงาม แปลกตาม และมีความสลับซับซ้อนมากยิ่งขึ้น และในขณะเดียวกันการบริหารจัดการรูปภาพด้วย CSS ก็ยังมีคุณสมบัติที่ HTML ทำไม่ได้ หรือทำได้ไม่ดีพอ เช่น
- กำหนดขนาดของภาพโดยใช้เปอร์เซ็นแทนการใช้ตัวเลขที่เป็นค่าคงที่ ทำให้สามารถปรับภาพได้ขยาย หรือลดขนาด ขึ้น-ลง ตามขนาดของพื้นที่การแสดงผลเว็บเพจ
- กำหนดให้วางภาพพื้นหลังในตำแหน่งต่าง ๆ ได้ตามต้องการ ไม่จำเป็นต้องต้องวาง หรือเริ่มที่ด้านบนซ้ายของพื้นที่การแสดงผลหน้าเว็บเพจซึ่งเป็นค่า Default เท่านั้น
- สามารถวางภาพที่มีขนาดเล็กให้แสดงผลต่อเนื่องกันได้เฉพาะแนวนอน หรือแนวตั้งตามต้องการ
- ทำให้มีภาพพื้นหลังหลายภาพซ้อนกันได้ตามต้องการ
Property ที่ใช้กำหนดภาพพื้นหลัง
ใน CSS มี Property เพื่อใช้วางภาพพื้นหลังในลักษณะต่าง ๆ ดังนี้
- background-image เป็นการกำหนดไฟล์ภาพที่ใช้เป็นพื้นหลังโดยการระบุตำแหน่งที่อยู่ของไฟล์ภาพ (part) และชื่อไฟล์ภาพ หากขนาดภาพเล็กกว่าพื้นที่การแสดงผล ภาพจะถูกแสดงต่อเนื่องกันกันค่า Default ตัวอย่างเช่น background-image : url('/pict_04.jpg'); เป็นต้น
- background-repeat เป็นการวางภาพนั้นต่อกันไปเรื่อย ๆ จนเต็มพื้นที่ โดยภาพที่นำมาใช้ควรเป็นแบบ pattern ซึ่งเรียงต่อกันได้สนิทเป็นชิ้นเดียวกัน สำหรับค่าที่ระบุจะเป็นคำเฉพาะ ได้แก่ x (แนวนอน) , y (แนวตั้ง), repeat (วางซ้ำทั้งสองแนว) , no-repeat (ให้วางครั้งเดียวไม่ต้องแสดงภาพซ้ำ) ตัวอย่าง background-repeat : repeat-x; เป็นการกำหนดให้แสดงภาพต่อกันในแนวนอน เป็นต้น
- background-position เป็นการบอกตำแหน่งที่จะวางภาพลง ซึ่งโดยปกติจะเริ่ม ณ ตำแหน่งมุมบนซ้ายมือของเรา การระบุค่าจะเป็นตัวเลขบอกจุดเริ่มต้นแนวนอน (x) และแนวตั้ง (y) ซึ่งสามารถใช้เป็นค่าคงที่ หรือค่าเปอร์เซ็นต์ก็ได้ ตัวอย่าง background-position : 50px 20px; หมายถึง วางภาพจุดเริ่มต้นแนวนอนที่ตำแหน่งพิกเซลที่ 50 และแนวตั้งที่ตำแหน่งพิกเซลที่ 20 โดยภาพจะห่างจากขอบของพื้นที่การแสดงผล
- background เป็นการรวมค่าคุณสมบัติ (Property) หลาย ๆ รายการมากำหนดในที่เดียวกัน ตามลักษณะการใช้งาน เช่น background : url('/pict_05.jpg') no-repeat 100px 150px; เป็นต้น
ตัวอย่างการใช้ CSS กำหนดการแสดงภาพพื้นหลังในแท็กคำสั่ง <body> ของ HTML
การแสดงภาพพื้นหลังบนหน้าเว็บเพจจะมีลักษณะดังภาพตัวอย่าง