CSS Backgrounds กำหนดพื้นหลังด้วย Css เป็นการจัดหน้าตาหรือรูปแบบของเว็บเพจเพื่อให้ดึงดูดความสนใจให้แก่ผู้ชื่นชมเป็นเรื่องที่สำคัญมากในการสร้างเว็บเพจนอกจากมีการตกแต่งตัวอักษรข้อความและสามารถเพิ่มการใส่รูปภาพของเว็บเพจ ในการกำหนดพื้นหลังให้กับเว็บเพจสามารถใช้รูปภาพหรือการใช้สีได้ โดยสามารถกำหนดสีข้อความได้ ถ้าหากพื้นหลังเป็นสีเข้มให้ข้อความเป็นสีอ่อน แต่ถ้าหากพื้นหลังเป็นที่อ่อน ก็ให้ข้อความเป็นสีเข้มได้ ซึ่งการใส่พื้นหลังรูปภาพหรือการใส่สี สามารถกำหนดตำแหน่งพื้นหลังได้ Show กำหนดคำสั่ง Background  ในการกำหนดรูปแบบพื้นหลังด้วย css เพื่อให้เว็บเพจมีสันมีความน่าสนใจ ในการเขียนโปแกรมเว็บไซต์ต้องมีการออกแบบเว็บไซต์ให้สวยงาม การจัดสัดส่วน layout ของเว็บเพจ สามารถใช้กำหนส่วนต่าง ๆของเว็บไซต์ได้อีกด้วย ในการออกแบบ CSS เป็นภาษา Style Sheets โดย Style Sheets ชุดเดียวสามารถใช้กำหนดรูปแบบการแสดงผลให้เอกสาร HTML ทั้งหน้า หรือทุกหน้ามีผลเหมือนกันได้ จึงทำให้เวลาที่มีการแก้ไขก็จะแก้ไขได้ง่ายขึ้นเพียงแก้ไข Style Sheets ที่ใช้งานเพียงชุดเดียวเท่านั้น ทำให้เว็บไซต์มีมาตราฐานเพราะการใช้งาน CSS นั้นจะทำให้การแสดงผลในสื่อต่าง ๆ ถูกปรับเปลี่ยนไปได้อย่างเหมาะสม เช่น การแสดงผลบนหน้าจอ อ้างอิง Background Images คือภาพพื้นหลังที่จะแสดงอยู่ในหน้าเว็บไซต์หรือในเอลิเมนต์ ใน HTML เราสามารถกำหนดภาพพื้นหลังได้โดยการกำหนดที่พร็อพเพอร์ตี้ การกำหนดภาพพื้นหลังให้ HTML elementเราสามารถกำหนดภาพพื้นหลังให้ HTML element ได้โดยใช้แอททริบิวต์ style ดังนี้ <div style="background-image: url('my_bg.jpg');"> </div>หรือจะกำหนดในเอลิเมนต์ style ก็ได้เช่นกัน ดังนี้ <style>
div {
background-image: url('my_bg.jpg');
}
</style> การกำหนดภาพพื้นหลังให้เว็บเพจถ้าต้องการกำหนดภาพพื้นหลังให้หน้าเว็บทั้งหน้า ต้องกำหนดที่เอลิเมนต์ <body style="background-image: url('my_bg.jpg');">หรือ <style>
body {
background-image: url('my_bg.jpg');
}
</style> Background Repeatถ้ารูปที่เราใช้เป็นพื้นหลังมีขนาดเล็กกว่าเอลิเมนต์ รูปจะถูกแสดงซ้ำเรื่อยๆทั้งแนวตั้งและแนวนอนจนกว่าจะเต็มพื้นที่ของเอลิเมนต์ ถ้าไม่ต้องการให้ภาพพื้นหลังแสดงซ้ำ ให้เพิ่มพร็อพเพอร์ตี้ <style>
body {
background-image: url('my_bg.jpg');
background-repeat: no-repeat;
}
</style> ถ้าต้องการให้ภาพพื้นหลังครอบคลุมเอลิเมนต์ทั้งหมด ให้กำหนดค่าพร็อพเพอร์ตี้ <style>
body {
background-image: url('my_bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style> ถ้าต้องการให้ภาพพื้นหลังฟิตเต็มพื้นที่ของเอลิเมนต์ ให้กำหนดค่าพร็อพเพอร์ตี้ <style>
body {
background-image: url('my_bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style> Post navigation |
หากต้องการนำรูปภาพมาเป็นลายพื้นหลังของหน้าเว็บเพจต้องใช้คำสั่ง backgroud river.jpg แทรกไว้ที่ส่วนใด
ลิขสิทธิ์ © 2024 toptenid.com Inc.
