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

อย่างไรก็ตาม เราไม่จำเป็นต้องกำหนดค่าให้ครบทุกค่า สิ่งเดียวที่เราต้องคำนึงถึงก็คือ ต้องเรียงลำดับให้ถูกดังที่กล่าวไว้ข้างต้น ห้ามสับลำดับกัน

Tags

เรื่องที่น่าสนใจ