กำหนดภาพพื้นหลังขององค์ประกอบด้วย CSS

การใช้ background-image

เพื่อกำหนดภาพพื้นหลังขององค์ประกอบ ให้ใช้คุณสมบัติ background-image

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การทำงานของคุณสมบัติ background-image:

<html>
  <head>
    <style>
      body {
        background-image: url("/css/images/css.jpg");
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

แนวทางปฏิบัติที่ดี:

• ระบุ background-color เป็นสีสำรองเสมอ
• ใช้ background-size ควบคุมขนาดภาพ (cover, contain, หรือค่าพิกเซล)
• ใช้ background-repeat และ background-position ร่วมกับได้