คุณสมบัติ CSS background-image: กำหนดภาพพื้นหลัง

คุณสมบัติ background-image

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

รูปแบบไวยากรณ์

background-image: url('path/to/image.jpg');
background-image: linear-gradient(45deg, red, blue);
background-image: url(img1.png), url(img2.png); /* หลายภาพ */

ตัวอย่างการใช้งาน

<html>
<head>
  <style>
    #demo {
      border: 5px dashed red;
      padding: 10px;
      background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
    }
  </style>
</head>
<body>
  <div id="demo">
    <h1>www.tutorialspoint.com</h1>
    <p>Tutorials Point เริ่มต้นจากความคิดว่ามีกลุ่มผู้อ่านตอบสนองดีกับเนื้อหาออนไลน์...</p>
  </div>
</body>
</html>

คุณสมบัติที่มักใช้ร่วมกัน

หลายภาพพื้นหลัง (Multiple Backgrounds)

.multi-bg {
  background-image: 
    url(pattern.png),
    url(hero.jpg),
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: 0 0, center, 0 0;
  background-size: auto, cover, cover;
}

ภาพแรกสุดจะอยู่ชั้นบนสุด (topmost layer)