
CSS Backgrounds กำหนดพื้นหลังด้วย CSS
เมื่อต้องการกำหนดพื้นหลังให้เอลิเมนต์ ไม่ว่าจะเป็นภาพพื้นหลังหรือสีพื้นหลัง และสไตล์ต่าง ๆ เกี่ยวกับพื้นหลัง เราจะใช้ CSS ในการกำหนดสไตล์
CSS background-color กำหนดสีพื้นหลัง
พร็อพเพอร์ตี้ background-color
ใช้สำหรับกำหนดสีพื้นหลังให้กับเอลิเมนต์ โดยเราสามารถกำหนดค่าให้พร็อพเพอร์ตี้ได้ทั้ง ชื่อสี หรือระบบสี RGB, HEX, XSL เช่น
body { background-color: blue; }
นอกจากเอลิเมนต์ body
แล้ว เรายังสามารถกำหนดพื้นหลังให้เอลิเมนต์อื่น ๆ ได้ด้วย เช่น
h1 { background-color: blue; } div { background-color: blue; } p { background-color: blue; }
CSS background-image กำหนดภาพพื้นหลัง
ถ้าต้องการกำหนดภาพพื้นหลังให้เอลิเมนต์ สามารถกำหนดได้ที่พร็อพเพอร์ตี้ background-image
ดังนี้
body { background-image: url("my_bg.jpg"); }
CSS background-repeat
โดยปกติ เมื่อกำหนดภาพพื้นหลังให้เอลิเมนต์ ถ้าภาพนั้นเล็กเกินไป ภาพจะถูกแสดงซ้ำ ๆ ทั้งแนวตั้งและแนวนอน จนเต็มพื้นที่เอลิเมนต์นั้น ๆ
ถ้าต้องการให้ภาพพื้นหลังแสดงซ้ำเฉพาะแนวนอน ให้กำหนดที่พร็อพเพอร์ตี้ background-repeat
เป็น repeat-x
ดังนี้
body { background-image: url("my_bg.jpg"); background-repeat: repeat-x; }
แต่ถ้าต้องการให้ภาพพื้นหลังแสดงซ้ำเฉพาะแนวตั้ง ให้กำหนดค่าพร็อพเพอร์ตี้ background-repeat
เป็น repeat-y
ดังนี้
body { background-image: url("my_bg.jpg"); background-repeat: repeat-y; }
แต่ถ้าไม่ต้องการให้ภาพพื้นหลังแสดงซ้ำ ให้กำหนดค่าพร็อพเพอร์ตี้ background-repeat
เป็น no-repeat
ดังนี้
body { background-image: url("my_bg.jpg"); background-repeat: no-repeat; }
CSS background-position จัดตำแหน่งให้ภาพพื้นหลัง
ถ้าต้องการกำหนดตำแหน่งให้ภาพพื้นหลัง ให้กำหนดที่พร็อพเพอร์ตี้ background-position ดังนี้
body { background-image: url("my_bg.jpg"); background-repeat: no-repeat; background-position: right top; }
CSS background-attachment
ถ้าต้องการกำหนดให้ภาพพื้นหลังเลื่อนตามหน้าเพจหรือให้ภาพอยู่นิ่ง ๆ ไม่เลื่อนตาม ให้กำหนดที่พร็อพเพอร์ตี้ background-attachment
ดังตัวอย่าง
body { background-image: url("my_bg.jpg"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; }
จากโค้ดตัวอย่าง กำหนดค่า fixed
ให้กับพร็อพเพอร์ตี้ background-attachment
จะเป็นการกำหนดให้ภาพพื้นหลังอยู่นิ่ง ๆ ไม่เลื่อนตามหน้าเพจ
แต่ถ้าต้องการกำหนดให้ภาพพื้นหลังเลื่อนตามหน้าเพจ ให้กำหนดค่า scroll
ให้กับพร็อพเพอร์ตี้ background-attachment
ดังนี้
body { background-image: url("my_bg.jpg"); background-repeat: no-repeat; background-position: right top; background-attachment: scroll; }
CSS background – Shorthand property เขียนโค้ดกำหนดพื้นหลังแบบสั้นกระชับ
จากการเขียนโค้ดกำหนดพื้นหลังที่ผ่านมา จะเห็นได้ว่า เราต้องเขียนโค้ดค่อนข้างยาว แต่เราสามารถเขียนโค้ดให้สั้นลงได้ ดังรูปแบบดังนี้
body { background: #ffffff url("my_bg.jpg") no-repeat right top; }
จะเห็นได้ว่า การเขียนโค้ดดังตัวอย่าง จะช่วยให้เราสามารถเขียนโค้ดได้สั้นกระชับมากขั้น
อย่างไรก็ตาม เมื่อเขียนโค้ดในลักษณะอย่างนี้ ต้องเรียงลำดับค่าของพร็อพเพอร์ตี้ให้ถูกลำดับ ดังนี้
background-color
background-image
background-repeat
background-attachment
background-position
อย่างไรก็ตาม เราไม่จำเป็นต้องกำหนดค่าให้ครบทุกค่า สิ่งเดียวที่เราต้องคำนึงถึงก็คือ ต้องเรียงลำดับให้ถูกดังที่กล่าวไว้ข้างต้น ห้ามสับลำดับกัน