Typography & Colors

1. background คือชั้นด้านหลังของ element

background คือกลุ่ม property ที่ควบคุมพื้นหลังของ element พื้นหลังอยู่หลังข้อความและเนื้อหาภายในเสมอ ค่าที่ใช้บ่อยคือ background-color สำหรับสีพื้นหลัง และ background-image สำหรับรูปหรือ gradient ถ้าพื้นหลังซับซ้อน ต้องระวังให้ข้อความด้านบนยังอ่านได้ชัด

2. Mental model: พื้นและวอลเปเปอร์

ลองนึกถึงห้องหนึ่งห้อง background-color คือสีพื้นห้อง ส่วน background-image คือวอลเปเปอร์ที่อยู่ด้านหลังของทุกอย่าง ถ้าวอลเปเปอร์ไม่แสดง สีพื้นยังอยู่เป็น fallback ถ้าวอลเปเปอร์เล็กเกินไป browser อาจทำซ้ำ ถ้าไม่อยากให้ซ้ำต้องบอกด้วย background-repeat: no-repeat

• 1. เริ่มจาก background-color เป็น fallback ก่อน
• 2. เพิ่ม background-image ถ้าต้องการ gradient หรือภาพตกแต่ง
• 3. ใช้ background-size, repeat และ position เพื่อควบคุมการวางพื้นหลัง
• 4. ตรวจว่า color ของข้อความยังตัดกับพื้นหลังพอให้อ่านได้

3. Gradient คือ background-image แบบ CSS

linear-gradient(...) เป็นค่าของ background-image ที่สร้างสีไล่เฉดด้วย CSS ไม่ต้องใช้ไฟล์รูปภาพ เช่น linear-gradient(135deg, #0f172a, #2563eb) หมายถึงไล่สีจากสีเข้มไปสีน้ำเงินในมุม 135 องศา

.hero {
  background-color: #0f172a;
  background-image: linear-gradient(135deg, #0f172a, #2563eb);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: white;
}

4. background-size: ค่าที่ควรรู้

background-size บอก browser ว่าควรแสดงพื้นหลังในขนาดเท่าไหร่ ค่าที่เลือกจะกระทบทั้งขนาด สัดส่วน และการครอบคลุมพื้นที่ของ element

5. object-fit: ควบคุมรูปภาพใน element

object-fit ใช้กับ element ที่แสดงสื่อ เช่น <img> และ <video> เพื่อบอกว่ารูปควรปรับตัวอย่างไรให้พอดีกับกรอบที่กำหนด แนวคิดคล้ายกับ background-size แต่ใช้กับ <img> โดยตรงแทนที่จะเป็นพื้นหลัง CSS ซึ่งช่วยให้รูปที่มีสัดส่วนต่างกันแสดงได้อย่างสม่ำเสมอ

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
}

6. ทดลองเปลี่ยนพื้นหลัง

7. Recap

• background-color คือสีพื้นหลังพื้นฐานและเป็น fallback ที่ดี
• background-image ใช้กับ gradient หรือภาพพื้นหลัง
• background-size: cover คลุมพื้นที่ทั้งหมด, contain เห็นทั้งภาพ, auto ขนาดต้นฉบับ
• background-size, repeat และ position ควบคุมการวางพื้นหลัง
• object-fit ใช้กับ <img> เพื่อควบคุมการแสดงรูปในกรอบ เช่น cover หรือ contain
• ข้อความด้านบนพื้นหลังต้องมี color ที่อ่านชัดเสมอ

Lab 1: กำหนดสีพื้นหลัง

เป้าหมาย: ใช้ background-color เป็นพื้นหลังพื้นฐาน โจทย์: 1. กำหนด .hero ให้มี background-color: #0f172a 2. กำหนด .hero ให้มี color: white เพื่อให้อ่านได้

Lab 2: เพิ่ม linear-gradient

เป้าหมาย: ใช้ background-image กับ linear-gradient หลังจากมีสี fallback แล้ว โจทย์: 1. กำหนด .banner ให้มี background-image: linear-gradient(135deg, #0f172a, #2563eb)

Lab 3: ควบคุมขนาดและการซ้ำ

เป้าหมาย: ใช้ background-size และ background-repeat เพื่อควบคุมการวางพื้นหลัง โจทย์: 1. กำหนด .banner ให้มี background-size: cover 2. กำหนด .banner ให้มี background-repeat: no-repeat

Lab 4: จัดตำแหน่งพื้นหลัง

เป้าหมาย: ใช้ background-position เพื่อกำหนดจุดวางพื้นหลัง โจทย์: 1. กำหนด .banner ให้มี background-position: center