CSS ภาพพื้นหลังเต็มจอ แบบขยายรูปเต็มหน้าจอ

สอนเขียนภาษา CSS ภาพพื้นหลังเต็มจอ แบบขยายรูปเต็มหน้าจอ ของเว็บไซต์ โดยแนะนำให้ใช้คำสั่ง background-image ร่วมกับคำสั่ง background-size โดยรูปภาพจะไม่แสดงภาพซ้ำ แต่เป็นการขยายเต็มหน้าจอ สามารถเขียนคำสั่งได้ดังนี้

ตัวอย่าง CSS ภาพพื้นหลังเต็มจอ แบบขยายรูปเต็มหน้าจอ

<style>
    body {
        background-image: url('https://www.devdit.com/favicon-16x16.png');
        background-size: cover;
    }
</style>

CSS ภาพพื้นหลังเต็มจอ แบบขยายรูปเต็มหน้าจอ จากตัวอย่างโหลดรูปภาพด้วยคำสั่ง background-image และใช้คำสั่ง background-size: cover เพื่อขยายรูปภาพให้เต็มหน้าจอของเว็บไซต์