เล่นกับ พื้นหลัง

    XHTML ยกเลิก property ที่เกี่ยวกับพื้นหลังไปแล้วครับ เข่น bgcolor background แต่เราก็สามารถมากำหนดด้วย CSS แทนได้ แถมสวยงามกว่าด้วยครับ

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

  สำหรับ property ที่เกี่ยวกับพื้นหลังที่น่าสนใจก็มีดังนี้ครับ

background-color:#CCFFFF;

กำหนดค่าสีพื้นของ object
background-color:ค่าสี;

background-image:url(th.gif)

กำหนดรูปภาพพื้นหลังของ object
background-image:url(path ของรูป)

background-color:#F0F0F0;
background-image:url(wait.gif);
background-position:top right;
background-repeat:no-repeat;

นอกจากนี้เรายังสามารถกำหนดตำแหน่งของพื้นหลังได้อีกด้วยครับ
background-position:ตำแหน่ง ได้แก่ left top right bottom และ center; สามารถกำหนดพร้อมกันได้ 2 รายการตามตำแหน่งที่ต้องการได้เช่น
background-position:top right; (บน ขวา)
background-repeat:วิธีการวาดพื้นหลังซ้ำๆ ได้แก่ repeat no-repeat repeat-x และ repeat-y;
ในตัวอย่างใช้ background-repeat:no-repeat; เพื่อให้แสดงพื้นหลังแค่ครั้งเดียวครับ

background-image:url(wait.gif)
background-position:center;

ตรงกลางพื้นที่แสดงผลเลย
background-position:center;