การใช้งานพื้นหลัง CSS

การจัดการพื้นหลังใน CSS เป็นสิ่งสำคัญมากในการออกแบบเว็บไซต์ คุณสามารถกำหนดสีพื้นหลังหรือรูปภาพพื้นหลังให้กับองค์ประกอบได้ ซึ่งช่วยให้การแสดงผลของเว็บไซต์ดูสวยงามและน่าสนใจมากขึ้น เราจะมาอธิบายคุณสมบัติและวิธีการใช้งานพื้นหลังใน CSS อย่างละเอียด ดังนี้

สีพื้นหลัง background-color

background-color ใช้เพื่อกำหนดสีพื้นหลังขององค์ประกอบ สามารถใช้สีในรูปแบบต่าง ๆ เช่น ชื่อสี รหัสสีแบบ Hex, RGB, RGBA, HSL หรือ HSLA

ตัวอย่าง

/* ใช้ชื่อสี */
div {
  background-color: blue;
}

/* ใช้รหัสสีแบบ Hex */
div {
  background-color: #3498db;
}

/* ใช้ค่าสีแบบ RGB */
div {
  background-color: rgb(52, 152, 219);
}

/* ใช้ค่าสีแบบ RGBA (รวมความโปร่งใส) */
div {
  background-color: rgba(52, 152, 219, 0.7);
}

รูปภาพพื้นหลัง background-image

background-image ใช้เพื่อกำหนดรูปภาพให้เป็นพื้นหลังขององค์ประกอบ โดยสามารถใส่ URL ของรูปภาพที่ต้องการ

ตัวอย่าง

div {
  background-image: url('image.jpg');
}

ตำแหน่งของรูปภาพพื้นหลัง background-position

background-position ใช้ในการกำหนดตำแหน่งของรูปภาพพื้นหลัง โดยระบุตำแหน่งตามแกน X และ Y เช่น “top”, “bottom”, “left”, “right”, “center” หรือใช้ค่าเป็นเปอร์เซ็นต์หรือพิกเซล

ตัวอย่าง

div {
  background-position: center;
}

div {
  background-position: 50% 50%;
}

ขนาดของรูปภาพพื้นหลัง background-size

background-size ใช้ในการกำหนดขนาดของรูปภาพพื้นหลัง สามารถกำหนดขนาดเป็น “cover” (ให้ครอบคลุมทั้งองค์ประกอบ) หรือ “contain” (ให้แสดงเต็มตามอัตราส่วนที่ถูกต้อง) หรือใช้หน่วยเป็นพิกเซลหรือเปอร์เซ็นต์

ตัวอย่าง

div {
  background-size: cover;
}

div {
  background-size: 100px 50px;
}

การทำซ้ำของรูปภาพพื้นหลัง background-repeat

background-repeat ใช้เพื่อกำหนดว่ารูปภาพพื้นหลังจะทำซ้ำหรือไม่ สามารถตั้งค่าให้ทำซ้ำในแนวนอน (repeat-x), แนวตั้ง (repeat-y), หรือไม่ทำซ้ำ (no-repeat)

ตัวอย่าง

div {
  background-repeat: no-repeat;
}

การเลื่อนของรูปภาพพื้นหลัง background-attachment

background-attachment ใช้ในการกำหนดว่ารูปภาพพื้นหลังจะเลื่อนตามเมื่อเลื่อนหน้าเว็บหรือไม่ สามารถตั้งค่าเป็น scroll (เลื่อนตาม) หรือ fixed (ยึดอยู่กับตำแหน่งเดิม)

ตัวอย่าง

div {
  background-attachment: fixed;
}

การแสดงพื้นหลังหลายรูปภาพ background

สามารถกำหนดรูปภาพพื้นหลังหลายรูปพร้อมกันได้ โดยใช้ background ในการรวมคุณสมบัติหลาย ๆ อย่างไว้ในคำสั่งเดียว เช่น สีพื้นหลัง, รูปภาพพื้นหลัง, การทำซ้ำ, ตำแหน่ง และอื่น ๆ

ตัวอย่าง

div {
  background: url('image1.jpg') no-repeat center,
              url('image2.png') repeat-x bottom,
              #f0f0f0;
}

คำสั่งรวมของพื้นหลัง background

เราสามารถเขียนคำสั่งของพื้นหลังแบบรวมได้โดยใช้คำสั่ง background เพื่อรวมคุณสมบัติต่าง ๆ เช่น สีพื้นหลัง, รูปภาพพื้นหลัง, การทำซ้ำ, ตำแหน่ง และอื่น ๆ เข้าไว้ในคำสั่งเดียว

ตัวอย่าง

div {
  background: #f0f0f0 url('image.jpg') no-repeat center/cover;
}

สรุป

การใช้ CSS สำหรับพื้นหลังนั้นมีความยืดหยุ่นสูง ไม่ว่าจะเป็นการกำหนดสีพื้นหลังหรือรูปภาพพื้นหลัง คุณสามารถควบคุมขนาด, การทำซ้ำ, ตำแหน่ง และการแสดงผลอื่น ๆ ได้ตามต้องการ