เล่นกับ พื้นหลัง
XHTML ยกเลิก property ที่เกี่ยวกับพื้นหลังไปแล้วครับ เข่น bgcolor background แต่เราก็สามารถมากำหนดด้วย CSS แทนได้ แถมสวยงามกว่าด้วยครับ
ไม่รู้ว่าผมคิดไปเองหรือเปล่านะ ว่าการกำหนดพื้นหลังด้วย CSS ช่วยให้เพจไม่กระพริบได้ดีในระดับหนึ่งทีเดียว ต่างจากที่ผมเคยทำภายในตาราง ซึ่งตอนโหลดครั้งแรกมักมีการกระพริบของตารางเสมอก่อนจะเป็นกรอบที่สมบูรณ์
สำหรับ property ที่เกี่ยวกับพื้นหลังที่น่าสนใจก็มีดังนี้ครับ
background-color:ค่าสี;
background-image:url(path ของรูป)
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-position:center;
ไม่รู้ว่าผมคิดไปเองหรือเปล่านะ ว่าการกำหนดพื้นหลังด้วย CSS ช่วยให้เพจไม่กระพริบได้ดีในระดับหนึ่งทีเดียว ต่างจากที่ผมเคยทำภายในตาราง ซึ่งตอนโหลดครั้งแรกมักมีการกระพริบของตารางเสมอก่อนจะเป็นกรอบที่สมบูรณ์
สำหรับ property ที่เกี่ยวกับพื้นหลังที่น่าสนใจก็มีดังนี้ครับ
background-color:#CCFFFF;
กำหนดค่าสีพื้นของ objectbackground-color:ค่าสี;
background-image:url(th.gif)
กำหนดรูปภาพพื้นหลังของ objectbackground-image:url(path ของรูป)
background-color:#F0F0F0;
background-image:url(wait.gif);
background-position:top right;
background-repeat:no-repeat;
นอกจากนี้เรายังสามารถกำหนดตำแหน่งของพื้นหลังได้อีกด้วยครับ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;
background-position:center;