CSS ดึงรูปภาพมาแสดงที่หน้าเว็บไซต์ ด้วย background-image

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

ตัวอย่าง CSS ดึงรูปภาพมาแสดงที่หน้าเว็บไซต์ ด้วย background-image

<style>
    #box {
        background-image:url('https://www.devdit.com/favicon-16x16.png');
        width: 16px;
        height: 16px;
    }
</style>

<div id="logo"></div>

CSS ดึงรูปภาพมาแสดง จากตัวอย่างแสดงรูปภาพที่ตำแหน่ง div id เท่ากับ logo โดยใช้คำสั่ง background-image:url ตามด้วยที่อยู่ของรูปภาพ พร้อมกำหนดความกว้าง width และความสูง height ของรูปภาพตามที่ต้องการจะแสดง