Devdit
 

โค้ด PHP ภาพพื้นหลังเต็มจอ ด้วยคำสั่ง CSS

8.1K

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

 

ตัวอย่างที่ 1 โค้ด PHP ภาพพื้นหลังเต็มจอ แบบทำซ้ำ

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

คำอธิบาย

โค้ด PHP ภาพพื้นหลังเต็มจอ จากโค้ดด้านบนกรณีถ้ารูปภาพมีขนาดเล็กกว่าขนาดการแสดงผลของจอ รูปภาพจะถูกโหลดซ้ำจนเต็มพื้นหลังของเว็บไซต์ หรือจอภาพ

 

ตัวอย่างที่ 2 โค้ด PHP ภาพพื้นหลังเต็มจอ แบบโหลดภาพเดียวขยายเต็มหน้าจอ

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

คำอธิบาย

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

แก้ไข 2 ปีที่แล้ว
ชอบ
ลิ้งก์
แชร์
Devdit มีช่อง YouTube แล้ว
เราสร้างวิดีโอเกี่ยวกับเทคโนโลยี ทำตามง่ายๆ