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

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

ไวยากรณ์ (Syntax)

object.style.backgroundImage = "url('URL')|none|initial|inherit"

ค่าที่ใช้ได้ (Values)

ตัวอย่าง (Example)

<!DOCTYPE html> <html> <head> <style> 
  #DIV1 { 
    height: 300px; 
    width: 500px; 
    background-image: url("https://www.tutorialspoint.com/mongodb/images/mongodb-minilogo.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
  } 
</style> 
<script> 
  function changeBackImage(){ 
    document.getElementById("DIV1").style.backgroundImage="url('https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg')"; 
    document.getElementById("Sample").innerHTML="The background image is now changed to PL/SQL Tutorial"; 
  } 
</script> </head> 
<body> 
<h2>Learn</h2> 
<div id="DIV1"></div> 
<p>Change the above div background image by clicking the below button</p> 
<button onclick="changeBackImage()">CHANGE IMAGE</button> 
<p id="Sample"></p> 
</body> </html>

ผลลัพธ์ (Output)

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

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