การกำหนดรูปแบบพื้นหลัง (background)

        การกำหนดรูปแบบพื้นหลังของเว็บเพจนั้นจำทำให้เว็บเพจมีสีสันน่าสนใจมากขึ้น ซึ่งโดยปกติถ้าไม่กำหนดสีพื้นหลังให้กับเว็บเพจ พื้นหลังจะเป็นสีขาว การกำหนดสีดพื้นหลังสามารถทำได้ 2 ลักษณะคือ การกำหนดพื้นหลังด้วยสีพื้น และการกำหนดพื้นหลังด้วยรูปภาพ ซึ่งทำได้โดยกำหนดลักษณะประจำให้กับแท็ก รูปแบบการกำหนดพื้นหลังมีดังนี้

 ชื่อลักษณะประจำ
รูปแบบ
ตำแหน่งที่ใช้
ตัวอย่างการใช้
หรือ
        BGCOLOR
        <BODY BGCOLOR="ชื่อสีหรือค่าสี"> </BODY>
        ภายในแท็ก <BODY>
        <BODY BGCOLOR="LIGHTBLUE"></BODY>
        <BODY BGCOLOR="#AFD7E0"></BODY>

        การกำหนดพื้นสีให้กับสิ่งต่างในเว็บเพจสามารถทำได้ 2 วิธี คือ กำหนดด้วยชื่อสี เช่น Lightblue, Black, White, Red หรืออาจจะกำหนดเป็นตัวเลขค่าสี  RGB  ก็ได้ โดยที่ค่าของตัวอักษรคู่แรกเป็นค่าของตัวอักษรสีแดง ค่าอักษรคู่ที่สองเป็นสีเขียว ค่าอักษรคู่ที่สามเป็นสีน้ำเงิน ตามลำดับ ค่าอักษรนี้เขียนอยู่ในรูปแบบของเลขฐานสิบหก มีค่าอยู่ระหว่าง O - FF  
หรือ 0 - 255 ในระบบเลขฐานสิบ ค่าตัวเลขที่มีค่ามากหมายถึงสีเข้าใกล้แม่สีนั้น ดังตัวอย่าง


        สำหรับการเขียนนั้นจะใช้เครื่องหมาย  #  นำหน้า แต่ในบราวเซอร์รุ่นใหม่ ๆ ไม่ต้องมีก็ได้


                     ตัวอย่าง การเขียนคำสั้งกำหนดสีพื้นหลัง               ตัวอย่าง การแสดงผลบน บราวเซอร์


        นอกจากการกำหนดสีให้กับพื้นหลังแล้วเรายังสามารถนำรูปภาพมาใส่เป็นพื้นหลังให้กับเว็บเพจได้ ด้วยรูปแบบดังนี้

 ชื่อลักษณะประจำ
รูปแบบ

ตำแหน่งที่ใช้
ตัวอย่างการใช้
        BACKGROUND
        <BODY BACKGROUND="ชื่อรูปภาพ">
        </BODY>
        ภายในแท็ก <BODY>
        
<BODY BACKGROUND="picture1.gif"> </BODY>   


        โดยทั่วไปภาพที่นำมาเป็นพื้นหลังของเว็บเพจจะมีส่วนขยายเป็น .gif หรือ .jpg เนื่องจากมีขนาดเล็กกว่าภาพที่มีส่วนขยายเป็น .bmp ในกรณีที่มีรูปภาพขนาดใกล้เคียงกับหน้าจอเว็บเพจ ทำให้ปรากฏรูปภาพนั้นเต็มพื้นที่ของเว็บ แต่ถ้ารูปภาพนั้นมีขนาดเล็กกว่าหน้าเว็บเพจผลที่ได้ก็จะเป็นการนำรูปเล็ก ๆ มาเรียงต่อกันเต็มหน้าเว็บเพจจนเกิดเป็นลวดลาย ดังแสดงในรูปด้านล่าง

          ตัวอย่าง การเขียนคำสั่งให้ปรากฏภาพเป็นพื้นหลัง                               ตัวอย่าง การแสดงผลภาพพื้นหลัง

            เมื่อเราใส่รูปภาพพื้นหลังให้กับเว็บเพจแล้วจะพบว่า ถ้าข้อความมีหลายบรรทัดทำให้ต้องเลื่อนข้อความขึ้นลงภาพพื้นหลังก็จะเลื่อนตามด้วย ในกรณีที่ไม่ต้องการให้ภาพพื้นหลังเลื่อนตาม เราสามารถแก้ไขโดยเพิ่มลักษณะประจำ 
BGPROPERTIES="FIXED" ต่อท้าย BACKGROUND ดังนี้

 <BODY BACKGROUND="ชื่อภาพ" BGPROPERTIES="FIXED">.....</BODY>




ที่มาของข้อมูล : หนังสือเรียนวิชาเพิ่มเติม เทคโนโลยีสารสนเทศและการสื่อสาร กราฟฟิกและเทคโนโลยีสื่อประสม สสวท.