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-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
อย่างไรก็ตาม เราไม่จำเป็นต้องกำหนดค่าให้ครบทุกค่า สิ่งเดียวที่เราต้องคำนึงถึงก็คือ ต้องเรียงลำดับให้ถูกดังที่กล่าวไว้ข้างต้น ห้ามสับลำดับกัน
![[1แถม1] คอลลาเจน100X แอสตาแซนธิน พรีไบโอติกส์(62ซองx1กล่อง)collagen astaxanthin ซีวิต้า อาหารเสริม วิตามินซี](https://filebroker-cdn.lazada.co.th/kf/Sa66be2b2c2704ff6a3cac91b0ac6cc67g.jpg)
![[1แถม1] DODOLOVE Baby Wipes ผ้าเช็ดทำความสะอาดสำหรับเด็ก ออร์แกนิค ห่อใหญ่ 80 แผ่น ทิชชู่เปียก](https://down-ws-th.img.susercontent.com/75dc1a19d95eaede6da92b29fee09569)
