วิธีเขียนโค้ด HTML ใส่รูปพื้นหลัง
บทความนี้สอนวิธีเขียนโค้ด HTML ใส่รูปพื้นหลังของเว็บไซต์ โดยสอนทั้งหมด 2 วิธีคือ การใส่รูปพื้นหลังที่แท็ก body ของ HTML และการใส่รูปพื้นหลังด้วย CSS และเรียกใช้ที่ HTML โดยภาพพื้นหลังของเว็บไซต์นั้นเป็นส่วนที่สำคัญที่จะทำให้เว็บไซต์มีความสวยงาม น่าใช้งานมากยิ่งขึ้น
ตัวอย่าง ส่วนสำคัญของโค้ด HTML ใส่รูปพื้นหลัง
1. แท็ก body เป็นส่วนที่คลุมเว็บไซต์ทั้งหมด โดยเราจะใส่รูปภาพลงในแท็กนี้
2. คำสั่ง background-image:url เป็นคำสั่งโหลดรูปภาพที่ต้องการ
3. คำสั่ง background-repeat เป็นคำสั่งกำหนดรูปแบบการแสดงรูปภาพซ้ำ
ตัวอย่าง วิธีเขียนโค้ด HTML ใส่รูปพื้นหลัง ที่แท็ก body
<body style="background-image:url('cat.jpg')">
...
</body>จากตัวอย่างโค้ดสามารถอธิบายได้ดังนี้
1. ภายในแท็ก body ให้ใช้คำสั่ง style เพื่อกำหนดรูปแบบเพิ่มเติมให้กับพื้นหลังของเว็บไซต์
2. ใช้คำสั่ง background-image:url เพื่อกำหนดที่อยู่ และชื่อรูปภาพ
3. จากตัวอย่างไฟล์รูปภาพชื่อ cat.jpg อยู่ในตำแหน่งเดียวกับไฟล์ HTML
4. เมื่อรันเว็บไซต์ รูปภาพ cat.jpg แสดงเต็มหน้าจอพื้นหลังของเว็บไซต์
ตัวอย่าง วิธีเขียนโค้ด HTML ใส่รูปพื้นหลัง ด้วย CSS
<style>
body {
background-image:url('img/dog.jpg);
}
</style><body>
...
</body>จากตัวอย่างโค้ดสามารถอธิบายได้ดังนี้
1. เขียน CSS ลงในไฟล์ HTML โดยการใช้แท็ก style
2. อ้างถึงแท็ก body ของเว็บไซต์ HTML
3. ใช้คำสั่ง background-image:url เพื่อใส่รูปภาพลงพื้นหลังเว็บไซต์
4. กำหนดตำแหน่ง และชื่อรูปภาพลงใน url จากตัวอย่าง คือ img/dog.jpg
5. เมื่อรันเว็บไซต์ รูปภาพ dog.jpg ที่อยู่ใน folder img แสดงเต็มหน้าจอพื้นหลังของเว็บไซต์
ตัวอย่าง วิธีกำหนดเงื่อนไขการแสดงรูปภาพซ้ำ ด้วยคำสั่ง background-repeat
1. แสดงรูปภาพซ้ำเฉพาะแนวนอน ใช้คำสั่ง background-repeat: repeat-x
<style>
body {
background-image:url('cat.jpg');
background-repeat: repeat-x;
}
</style><body style="background-image:url('cat.jpg'); background-repeat: repeat-x">
</body>
2. แสดงรูปภาพซ้ำเฉพาะแนวตั้ง ใช้คำสั่ง background-repeat: repeat-y
<style>
body {
background-image:url('cat.jpg');
background-repeat: repeat-y;
}
</style><body style="background-image:url('cat.jpg'); background-repeat: repeat-y">
...
</body>
3. ไม่ต้องการให้แสดงรูปภาพซ้ำ ใช้คำสั่ง background-repeat: no-repeat
<style>
body {
background-image:url('cat.jpg');
background-repeat: no-repeat;
}
</style><body style="background-image:url('cat.jpg'); background-repeat: no-repeat">
...
</body>
