วิธีตั้งค่าขนาดภาพพื้นหลัง (Background Size) ด้วย JavaScript

บทนำ

Property backgroundSize ใน JavaScript DOM ใช้ควบคุมขนาดของภาพพื้นหลัง สามารถกำหนดความกว้างและความสูงได้ทั้งค่าคงที่และเปอร์เซ็นต์

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: 2px dashed blue;
      width: 600px;
      height: 400px;
      background: url('https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
    }
  </style>
</head>
<body>
  <button onclick="display()">ตั้งค่าขนาดภาพพื้นหลัง</button>
  <div id="box"></div>
  <script>
    function display() {
      document.getElementById("box").style.backgroundSize = "150px 200px";
    }
  </script>
</body>
</html>

รูปแบบค่าที่ใช้ได้

ตัวอย่างเพิ่มเติม

// ครอบคลุมทั้งพื้นที่ (อาจตัดขอบภาพ)
element.style.backgroundSize = "cover";

// ใส่พอดี container ทั้งภาพ (อาจมีพื้นที่ว่าง)
element.style.backgroundSize = "contain";

// กว้าง 100% สูง auto
element.style.backgroundSize = "100% auto";

// ใช้กับ multiple backgrounds
element.style.backgroundSize = "100px 100px, cover, 50% 50%";

ข้อสังเกต

Property นี้ทำงานร่วมกับ background-image และ background-repeat ได้ดี