วิธีเพิ่มพื้นหลังให้กับเว็บไซต์: 14 ขั้นตอน (พร้อมรูปภาพ)

2024 ผู้เขียน: Gilbert Ryder | [email protected]. แก้ไขล่าสุด: 2024-01-31 09:04

พื้นหลังเป็นองค์ประกอบที่สำคัญที่สุดอย่างหนึ่งของเว็บไซต์ พื้นหลังที่ดีจะสร้างโทนให้กับเว็บไซต์และเสริมเนื้อหา มีหลายวิธีในการเพิ่มพื้นหลัง โดยแต่ละวิธีมีจุดประสงค์ต่างกัน บางวิธีอนุญาตให้คุณใช้พื้นหลังกับทุกหน้าในเว็บไซต์ ในขณะที่วิธีอื่นๆ จะจำกัดพื้นหลังไว้เฉพาะบางหน้าเท่านั้น บทความนี้จะสอนวิธีเพิ่มพื้นหลังให้กับเว็บไซต์ของคุณโดยใช้ HTML หรือ CSS

ขั้นตอน

วิธีที่ 1 จาก 2: วิธี HTML

พื้นหลังสีทึบ

ขั้นตอนที่ 1 พื้นหลังสีทึบเป็นพื้นหลังประเภทพื้นฐานที่สุดที่คุณสามารถวางบนเว็บไซต์ได้

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

ขั้นตอนที่ 2 เปิดรหัสเว็บของคุณ (ที่มา)

ขั้นตอนที่ 3 ในแท็ก body เพิ่มแอตทริบิวต์ที่เรียกว่า bgcolor

ตอนนี้แท็ก body ของคุณควรมีลักษณะดังนี้-

โดยที่ COLORNAME เป็นชื่อของสี COLORNAME สามารถเติมตัวแทนสีได้หลายประเภท-

• (ชื่อสี)
• (ค่าฐานสิบหก)
• (ค่า RGB)

ขั้นตอนที่ 4 การทดลองกับ RGB และ # สามารถนำไปสู่เฉดสีได้มากมาย แต่คุณสามารถใช้วิธีแรกง่ายๆ

แต่จำไว้ว่าการพิมพ์สีที่ไม่ธรรมดาเป็น "สีเขียวอุลตรามารีนสีน้ำเงิน" จะทำให้ได้สีขาว

การเพิ่มภาพพื้นหลัง

การเพิ่มรูปภาพพื้นหลังนั้นซับซ้อนกว่าพื้นหลังสีทึบเล็กน้อย

ขั้นตอนที่ 1 เพิ่มคุณสมบัติพื้นหลังให้กับแท็ก body ดังนั้นมันจึงมีลักษณะดังนี้-

โดยที่ SRC เป็นแหล่งที่มาของรูปภาพ SRC สามารถอยู่ในโฟลเดอร์เดียวกัน หรือโฟลเดอร์/หน้าเว็บอื่น

• (อยู่ในโฟลเดอร์เดียวกัน)
• (ภายในโฟลเดอร์อื่น)
• (ในหน้าเว็บอื่น)

ขั้นตอนที่ 2 อย่าลืมพิมพ์นามสกุล.gif/-j.webp" />

วิธีที่ 2 จาก 2: วิธีการ CSS

พื้นหลังสีทึบ

ขั้นตอนที่ 1 ในการเพิ่มพื้นหลังสีทึบใน CSS ให้เพิ่มแอตทริบิวต์สไตล์

คุณยังสามารถให้ ID และ Classes และใช้ทั้งสไตล์ชีตภายนอกและภายใน

ขั้นตอนที่ 2 แท็กร่างกายของคุณควรมีลักษณะดังนี้-

โดยที่ COLORNAME คือชื่อของสี ค่าฐานสิบหก หรือ RGB(อย่าลืมขั้นตอนสุดท้ายของพื้นหลังสีทึบใน HTML ด้วยเช่นกัน)

การเพิ่มรูปภาพ

ขั้นตอนที่ 1 ในการเพิ่มรูปภาพ ให้เพิ่มแอตทริบิวต์ style ลงในแท็ก body

คุณยังสามารถให้ ID และ Classes และใช้ทั้งสไตล์ชีตภายนอกและภายใน

ขั้นตอนที่ 2 แท็กร่างกายของคุณควรมีลักษณะดังนี้-

ขั้นตอนที่ 3 จำไว้ว่า SRC เป็นแหล่งที่มา

อาจมาจากโฟลเดอร์เดียวกัน โฟลเดอร์อื่น หรือหน้าเว็บอื่น

• (อยู่ในโฟลเดอร์เดียวกัน)
• (ภายในโฟลเดอร์อื่น)
• (ในหน้าเว็บอื่น)

ขั้นตอนที่ 4 อย่าลืมเพิ่ม.extensions ด้วย

พื้นหลังที่มีลวดลายซ้ำ

ขั้นตอนที่ 1 ในการสร้างพื้นหลังที่มีลวดลายซ้ำๆ ให้เพิ่มพื้นหลังตามที่กล่าวไว้ในขั้นตอนข้างต้น

ตอนนี้แท็กร่างกายของคุณจะต้องเปลี่ยนเป็น -

โดยที่ REPEAT-SETTINGS คือการตั้งค่า สามารถตั้งค่าซ้ำได้หลายแบบ เช่น

• (พื้นหลังจะทำซ้ำทั้งในแนวตั้งและแนวนอน)
• (พื้นหลังจะทำซ้ำในแนวนอน)
• (พื้นหลังจะทำซ้ำในแนวตั้ง)

พื้นหลังภาพคงที่

ขั้นตอนที่ 1 แก้ไขภาพพื้นหลังให้ดูดีและไม่เปลี่ยนแปลงเมื่อคุณเลื่อนลง

ในการทำสิ่งเหล่านี้ คุณเพียงแค่ปรับแต่งโค้ดง่ายๆ ในส่วนด้านบน ปรับแต่งเพื่อให้แท็ก body มีลักษณะดังนี้-

โดยที่ SRC เป็นแหล่งที่มาของภาพพื้นหลัง POSITION คือตำแหน่งของรูปภาพ (สามารถอยู่ในช่วงจากกึ่งกลางถึงด้านบนขวา) การแนบพื้นหลังเป็น "ตัวเร่งปฏิกิริยา" หลักของประเภทพื้นหลังนี้ ใช้สำหรับบอกตำแหน่งของแบ็คกราวด์ และแนะนำว่าไม่ควรเปลี่ยน

เคล็ดลับ