คุณสมบัติ HTML DOM Style backgroundSize

คุณสมบัติ backgroundSize ของ HTML DOM Style ใช้สำหรับตั้งค่าหรือรับขนาดของภาพพื้นหลัง (background image)

ไวยากรณ์ (Syntax)

object.style.backgroundSize = "auto|length|cover|contain|initial|inherit"

คุณสมบัติ (Properties)

ตัวอย่าง (Example)

<!DOCTYPE html> <html> <head> <style> 
  #DIV1{ 
    box-shadow: 0 2px 0 4px mintcream; 
    padding: 45px; 
    background: url("https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg"); 
    background-size: 150px 150px; 
  } 
</style> 
<script> 
  function changeBackSize(){ 
    document.getElementById("DIV1").style.backgroundSize="100px 100px"; 
    document.getElementById("Sample").innerHTML="The background image size is now reduced"; 
  } 
</script> </head> 
<body> 
<h2>PL/SQL Tutorial</h2> 
<div id="DIV1"></div> 
<p>Change the background image size for the above div by clicking the below button</p> 
<button onclick="changeBackSize()">CHANGE SIZE</button> 
<p id="Sample"></p> 
</body> </html>

ผลลัพธ์ (Output)

ผลลัพธ์ที่ได้:

เมื่อคลิกปุ่ม CHANGE SIZE: