วิธีการ ใส่ภาพพื้นหลังด้วย HTML

ถ้าอยากใส่รูปในหน้าเว็บ ที่คุณต้องการก็คือ HTML แต่ถ้าอยากตั้งรูปเป็นพื้นหลังของหน้าเว็บนั้น ก็ต้องใช้ทั้ง HTML และ CSS โดย HTML นั้นย่อมาจาก Hypertext Markup Language เป็นโค้ดที่ใช้บอกเบราว์เซอร์ว่าต้องแสดงอะไรในหน้าเว็บนั้นบ้าง ^{[1]
X
แหล่งข้อมูลอ้างอิง} ส่วน CSS ย่อมาจาก Cascading Style Sheets ใช้แปลงโฉมหน้าตาเว็บที่คุณเห็น ^{[2]
X
แหล่งข้อมูลอ้างอิง} ถ้าเลือกรูปพื้นหลังที่ต้องการได้แล้ว ก็เลื่อนไปอ่านวิธีการข้างล่างกันเลย

ส่วน 1

ส่วน 1 ของ 5:

เตรียมไฟล์รูป

ดาวน์โหลดบทความ

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/42\/2627945-1-1.jpg\/v4-460px-2627945-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/42\/2627945-1-1.jpg\/v4-728px-2627945-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
สร้างโฟลเดอร์ไว้ใส่ไฟล์ HTML กับไฟล์รูปพื้นหลัง. ให้สร้างโฟลเดอร์ในคอม แล้วตั้งชื่อให้หาง่ายๆ
- จะตั้งชื่ออะไรก็ได้ แต่เวลาใช้ HTML ขอให้ฝึกเป็นนิสัย ว่าต้องตั้งชื่อไฟล์กับโฟลเดอร์แบบสั้นกระชับได้ใจความ คำสองคำได้ยิ่งดี
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a0\/2627945-2-1.jpg\/v4-460px-2627945-2-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a0\/2627945-2-1.jpg\/v4-728px-2627945-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

2
ใส่รูปพื้นหลังที่จะใช้ในโฟลเดอร์ HTML. ใส่รูปที่จะใช้ทำพื้นหลังในโฟลเดอร์ HTML
- ถ้าไม่ห่วงเรื่องเว็บจะเปิดในอุปกรณ์เก่าๆ เน็ตอืดๆ ไม่ได้ ก็ใช้รูปพื้นหลังแบบชัดๆ resolution สูงๆ ไปเลย ให้เลือกรูปสะอาดๆ สว่างๆ หรือเป็นแพทเทิร์นซ้ำๆ นี่แหละดีที่สุด เพราะข้อความด้านบนจะได้อ่านง่าย
- ถ้าไม่มีรูป ก็ลองไปดาวน์โหลดฟรีจากในเน็ต เสร็จแล้วเอามาใส่ในโฟลเดอร์ HTML เลย
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e0\/2627945-3-1.jpg\/v4-460px-2627945-3-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e0\/2627945-3-1.jpg\/v4-728px-2627945-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
สร้างไฟล์ HTML. เปิดโปรแกรม text editor ที่ถนัด แล้วสร้างไฟล์ใหม่ จากนั้นเซฟไฟล์เป็น index.html
- จะใช้โปรแกรม text editor ไหนก็ได้ กระทั่งโปรแกรมที่มีมาในเครื่อง Windows อยู่แล้วอย่าง Notepad หรือ TextEdit ของ Mac OS X
- ถ้าอยากใช้ text editor สำหรับ HTML โดยเฉพาะ ให้ คลิกที่นี่ เลย เพื่อดาวน์โหลด Atom โปรแกรม text editor ที่ใช้ได้ทั้งใน Windows, Mac OS X และ Linux
- ถ้าคุณใช้ TextEdit ก่อนเขียนไฟล์ HTML ให้คลิกเมนู Format ก่อน แล้วคลิก Make Plain Text จะได้แน่ใจว่าไฟล์ HTML นั้นเปิดในเบราว์เซอร์ได้
- โปรแกรม Word processor อย่าง Microsoft Word ไม่ค่อยเหมาะใช้เขียน HTML เพราะจะมีอักขระพิเศษที่มองไม่เห็นโผล่มา ถ้าไปแปลงฟอร์แมต ไฟล์ HTML จะเจ๊งได้ ทำให้ไม่ขึ้นในเบราว์เซอร์
โฆษณา

ส่วน 2

ส่วน 2 ของ 5:

เขียนไฟล์ HTML

ดาวน์โหลดบทความ

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d9\/2627945-4-1.jpg\/v4-460px-2627945-4-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d9\/2627945-4-1.jpg\/v4-728px-2627945-4-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
copy/paste โค้ด HTML มาตรฐาน. เลือกแล้ว copy โค้ด HTML ต่อไปนี้ แล้วเอาไป paste ในไฟล์ index.html ที่เปิดอยู่
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Page Title </ 
 title 
 > 
 < 
 style 
 > 
 body 
 { 
 background-image 
 : 
 url 
 ( 
 " " 
 ); 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4e\/2627945-5-1.jpg\/v4-460px-2627945-5-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4e\/2627945-5-1.jpg\/v4-728px-2627945-5-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ในไฟล์ index.html ให้หาบรรทัดที่เขียนว่า background-image: url(" "); จากนั้นคลิกเคอร์เซอร์ที่กลางวงเล็บ แล้วพิมพ์ชื่อไฟล์รูปพื้นหลัง อย่าลืมพ่วงนามสกุลไฟล์ไปด้วย

โฆษณา

ถ้าพิมพ์ถูก จะหน้าตาประมาณนี้

background-image: url("background.png");

เวลาคุณพิมพ์ชื่อไฟล์โดยไม่มี path หรือ URL ของไฟล์ เบราว์เซอร์จะไปตามหารูปที่ชื่อนี้ในโฟลเดอร์ของหน้าเว็บแทน แต่ถ้าไฟล์อยู่ในโฟลเดอร์อื่นของระบบไฟล์ ก็ต้องใส่ path เต็มๆ ของไฟล์นั้นแทน

^{[3]
X
แหล่งข้อมูลอ้างอิง}

เซฟไฟล์ HTML.

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/94\/2627945-6-1.jpg\/v4-460px-2627945-6-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/2627945-6-1.jpg\/v4-728px-2627945-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ส่วน 3

ส่วน 3 ของ 5:

ตรวจทานไฟล์ HTML

ดาวน์โหลดบทความ

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/72\/2627945-7-1.jpg\/v4-460px-2627945-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/72\/2627945-7-1.jpg\/v4-728px-2627945-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
เปิดไฟล์ HTML ในเบราว์เซอร์. คลิกขวาไฟล์ index.html แล้วเปิดในเบราว์เซอร์ที่ต้องการ
- พอเปิดเบราว์เซอร์แล้ว ถ้าไม่เจอรูป ให้เช็คว่าสะกดชื่อไฟล์รูปในหน้าต่าง text editor ของ index.html ถูกต้องแล้วหรือยัง
- พอเปิดเบราว์เซอร์แล้ว ถ้าเห็นเป็นโค้ด HTML แทนรูปพื้นหลัง แสดงว่าไฟล์ index.html ถูกเซฟเป็น rich text document ให้กลับไปแก้ไฟล์ HTML ในโปรแกรม text editor อื่นแทน
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f2\/2627945-8-1.jpg\/v4-460px-2627945-8-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f2\/2627945-8-1.jpg\/v4-728px-2627945-8-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ในหน้าต่าง text editor ให้คลิกเคอร์เซอร์ตรงกลางระหว่างแท็ก <body> </body> แล้วพิมพ์ Hello world! จากนั้นรีเฟรชเบราว์เซอร์เพื่อดูว่าข้อความขึ้นทับรูปพื้นหลังไหม

โฆษณา

ส่วน 4

ส่วน 4 ของ 5:

รู้จักโค้ด HTML

ดาวน์โหลดบทความ

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6d\/2627945-9-1.jpg\/v4-460px-2627945-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6d\/2627945-9-1.jpg\/v4-728px-2627945-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

โค้ด HTML นั้นประกอบด้วยแท็กเปิด (open tag) กับแท็กปิด (closed tag) แท็ก <body> คือแท็กเปิดของเนื้อหา (open body tag) ส่วย </body> คือแท็กปิดของเนื้อหา (closed body tag) ใส่แท็กเปิดตรงจุดไหนของหน้า HTML แล้วต้องใส่แท็กปิดด้วย ถึงจะแสดงผลได้
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6e\/2627945-10-1.jpg\/v4-460px-2627945-10-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6e\/2627945-10-1.jpg\/v4-728px-2627945-10-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

โค้ด HTML ที่ถูกต้อง ต้องเริ่มด้วย <!DOCTYPE html> เพื่อบอกเบราว์เซอร์ว่าไฟล์ HTML นี้คือไฟล์ HTML
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/73\/2627945-11-1.jpg\/v4-460px-2627945-11-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/73\/2627945-11-1.jpg\/v4-728px-2627945-11-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ในหน้าต่าง text editor ให้คลิกเคอร์เซอร์ตรงกลางระหว่างแท็ก <body> </body> แล้วพิมพ์ Hello world! จากนั้นรีเฟรชเบราว์เซอร์เพื่อดูว่าข้อความขึ้นทับรูปพื้นหลังไหม
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/af\/2627945-12-1.jpg\/v4-460px-2627945-12-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/af\/2627945-12-1.jpg\/v4-728px-2627945-12-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

โค้ด HTML นั้นประกอบด้วยแท็กเปิด (open tag) กับแท็กปิด (closed tag) แท็ก <body> คือแท็กเปิดของเนื้อหา (open body tag) ส่วย </body> คือแท็กปิดของเนื้อหา (closed body tag) ใส่แท็กเปิดตรงจุดไหนของหน้า HTML แล้วต้องใส่แท็กปิดด้วย ถึงจะแสดงผลได้
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9c\/2627945-13-1.jpg\/v4-460px-2627945-13-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9c\/2627945-13-1.jpg\/v4-728px-2627945-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

แท็ก <title> คือข้อความที่จะขึ้นในแถบชื่อ (title) ของหน้าต่างเบราว์เซอร์ รวมถึงใน tab ของเบราว์เซอร์ด้วย
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/37\/2627945-14-1.jpg\/v4-460px-2627945-14-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/2627945-14-1.jpg\/v4-728px-2627945-14-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

แท็ก <style> ใช้ระบุเนื้อหาที่เป็น CSS ทุกอย่างที่อยู่ตรงกลางระหว่างแท็ก <style> คือโค้ด CSS
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/eb\/2627945-15-1.jpg\/v4-460px-2627945-15-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/eb\/2627945-15-1.jpg\/v4-728px-2627945-15-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ข้อความไหนก็ตามที่อยู่ระหว่างแท็ก <body> จะเป็นเนื้อหาตามที่คุณพิมพ์ เว้นแต่เป็นโค้ด HTML หรือ CSS
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/2627945-16-1.jpg\/v4-460px-2627945-16-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/2627945-16-1.jpg\/v4-728px-2627945-16-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ในหน้าต่าง text editor ให้คลิกเคอร์เซอร์ตรงกลางระหว่างแท็ก <body> </body> แล้วพิมพ์ "Hello world!" จากนั้นรีเฟรชเบราว์เซอร์เพื่อดูว่าข้อความขึ้นทับรูปพื้นหลังไหม

โฆษณา

ส่วน 5

ส่วน 5 ของ 5:

รู้จักโค้ด CSS

ดาวน์โหลดบทความ

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5f\/2627945-17-1.jpg\/v4-460px-2627945-17-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5f\/2627945-17-1.jpg\/v4-728px-2627945-17-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ในโค้ด index.html โค้ด CSS ที่อยู่ตรงกลางระหว่างแท็ก <style> จะบอกเบราว์เซอร์ให้ใส่รูปพื้นหลังที่คุณกำหนดในแท็ก <body> ตอนโหลดหน้าเว็บ
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/2627945-18-1.jpg\/v4-460px-2627945-18-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/2627945-18-1.jpg\/v4-728px-2627945-18-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3

  body 
 
 { 
 background-image 
 : 
 url 
 ( 
 "background.png" 
 ); 
 }

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ab\/2627945-19-1.jpg\/v4-460px-2627945-19-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ab\/2627945-19-1.jpg\/v4-728px-2627945-19-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
รู้จักโค้ด CSS ส่วนต่างๆ. CSS styles นั้นแบ่งออกเป็น 2 ส่วน คือ selector กับ declaration ^{[4]
X
แหล่งข้อมูลอ้างอิง}
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b4\/2627945-20.jpg\/v4-460px-2627945-20.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b4\/2627945-20.jpg\/v4-728px-2627945-20.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

5
รู้จัก CSS declaration. CSS declaration ประกอบด้วย 2 ส่วน คือ property กับ value ส่วน
background-image กลางปีกกา คือ property และ url("background.png") คือ value ^{[5]
X
แหล่งข้อมูลอ้างอิง}
โฆษณา

[1]

[2]

[3]

[4]

[5]

เข้าสู่ระบบ

วิธีการ ใส่ภาพพื้นหลังด้วย HTML

ขั้นตอน

เตรียมไฟล์รูป

เขียนไฟล์ HTML

ตรวจทานไฟล์ HTML

รู้จักโค้ด HTML

รู้จักโค้ด CSS

บทความวิกิฮาวอื่น ๆ ที่่เกี่ยวข้อง

ข้อมูลอ้างอิง

เกี่ยวกับวิกิฮาวนี้

บทความนี้เป็นประโยชน์กับคุณไหม

บทความที่เกี่ยวข้อง

ติดตามเรา

แบ่งปัน

Explore Categories