พื้นหลังภาพ คุณสมบัติระบุภาพที่จะใช้เป็นพื้นหลังขององค์ประกอบ
ตามค่าเริ่มต้น รูปภาพจะถูกทำซ้ำเพื่อให้ครอบคลุมองค์ประกอบทั้งหมด
ตั้งค่าภาพพื้นหลังสำหรับหน้า:
body {
background-image: url("paper.gif");
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
</body>
</html>
ตัวอย่างนี้แสดง การผสมผสานที่ไม่เหมาะสม ของข้อความและรูปภาพพื้นหลัง ข้อความก็คือ อ่านไม่ออก:
body {
background-image: url("bgdesert.jpg");
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bgdesert.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
</body>
</html>
หมายเหตุ: เมื่อใช้ภาพพื้นหลัง ให้ใช้รูปภาพที่ไม่รบกวนข้อความ
ภาพพื้นหลังยังสามารถตั้งค่าสำหรับองค์ประกอบเฉพาะเช่นองค์ประกอบ <p>:
p {
background-image: url("paper.gif");
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This paragraph has an image as the background!</p>
</body>
</html>
ตั้งค่าภาพพื้นหลังสำหรับองค์ประกอบ