CSS แสดงรูปภาพ โหลดรูปภาพด้วย background-image

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

ตัวอย่าง CSS แสดงรูปภาพ โหลดรูปภาพด้วย background-image

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

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

โค้ดด้านบนเขียน CSS id #logo เพื่อแสดงรูปภาพด้วยคำสั่ง background-image พร้อมกับระบุ URL ของรูปภาพ และกำหนดค่าความกว้าง และความสูงของรูปภาพ จากนั้นนำ id #logo ไปแสดงรูปภาพในแท็ก HTML ตรงตำแหน่งที่ต้องการ ตัวอย่างคือแสดงที่ div