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

คุณสมบัติ background ใช้สำหรับตั้งค่าหรือรับภาพพื้นหลังที่เกี่ยวข้องกับองค์ประกอบ เป็นคุณสมบัติแบบ shorthand สามารถจัดการได้ถึง 8 คุณสมบัติ

ไวยากรณ์ (Syntax)

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

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

ตัวอย่าง (Example)

<!DOCTYPE html> <html> <head> <style> 
  #PIC{ 
    width: 250px; 
    height: 150px; 
    border:solid 3px black; 
    font-weight:100; 
    text-align:center; 
    color:white; 
    font-size:40px; 
    background: url("https://www.tutorialspoint.com/python/images/python-mini.jpg") no-repeat fixed 2% 8%; 
  } 
</style> 
<script> 
  function changeBackground(){ 
    document.getElementById("PIC").style.backgroundImage="url(https://www.tutorialspoint.com/csharp/images/csharp-mini-logo.jpg)"; 
    document.getElementById("Sample").innerHTML="The background URL is now changed and new background image can be seen."; 
  } 
</script> </head> 
<body> 
<h2>Learning is fun</h2> 
<div id="PIC">Tutorial</div> 
<p>Click the below button to change the above background image for the div</p> 
<button onclick="changeBackground()">CHANGE BACKGROUND</button> 
<p id="Sample"></p> 
</body> </html>

ผลลัพธ์ (Output)

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

เมื่อคลิก CHANGE BACKGROUND: