การทำงานกับ background images ใน CSS อาจเป็นเรื่องท้าทาย เพราะแม้คุณจะตั้งค่าในโค้ดแล้ว ก็ยังมีปัจจัยอื่นๆ ที่อาจป้องกันไม่ให้ background-image แสดงบนหน้าเว็บ
เพื่อช่วยแก้ไขปัญหา นี่คือ 4 วิธีในการแก้ไข background-image ที่ไม่ทำงาน โดยใช้ HTML และ CSS:
1. ตรวจสอบว่าไฟล์ CSS ถูกลิงก์ถูกต้องในไฟล์ HTML
เพื่อให้สไตล์ CSS โหลดในเว็บไซต์ คุณต้องเพิ่มแท็ก <link> ในไฟล์ HTML แท็กนี้ควรอยู่ภายในแท็ก <head></head> และควรมีลักษณะประมาณนี้:
<link rel="stylesheet" href="/style.css">如何判断 CSS 文件是否正确加载？
สัญญาณหนึ่งคือ เมื่อโหลดเว็บไซต์ พื้นหลังเป็นสีขาว ฟอนต์เป็น Times New Roman และไม่มีสีหรือสไตล์อื่นๆ
คุณยังสามารถตรวจสอบด้วยเครื่องมือ Inspector ของเบราว์เซอร์ โดยคลิกขวาที่หน้าเว็บเลือก "Inspect Element" หรือกด Ctrl-Shift-I ใน Inspector หากเห็นข้อผิดพลาด 404 not found สำหรับไฟล์ CSS หรือ The resource... was blocked due to MIME type mismatch แสดงว่ามีปัญหาในการโหลดไฟล์ CSS
หากเห็นข้อผิดพลาดเหล่านี้และเว็บไซต์ดูไม่มีสไตล์ ให้ตรวจสอบแท็ก <link> ก่อน ตรวจสอบว่า attribute href โหลดชื่อไฟล์เดียวกับไฟล์ CSS จริง และพาธถูกต้อง
พาธต้องเป็นพาธสัมพัทธ์ (relative) เทียบกับตำแหน่งไฟล์ HTML หากไฟล์ CSS อยู่ในไดเรกทอรีเดียวกับ HTML ให้ตั้ง href เป็น style.css (หรือชื่อไฟล์ CSS ของคุณ)
ผมมักใส่ forward slash / นำหน้าพาธ เช่น href="/style.css" เพื่อให้พาธเริ่มจากรากของเว็บไซต์
สิ่งนี้จำเป็นหากคุณมีหน้าในซับโฟลเดอร์ต่างๆ ที่โหลดโค้ด <head> เดียวกัน เช่นใช้ CMS แบบมีเทมเพลตที่มีโค้ดร่วมกัน
2. ตรวจสอบว่าเส้นทางรูปภาพตั้งค่าถูกต้องใน background-image url
เมื่อแน่ใจว่าไฟล์ CSS ลิงก์ถูกต้องแล้ว ให้ตรวจสอบว่ารูปภาพตัวเองตั้งค่าถูกต้อง เช่นกัน ให้เปิด Code Inspector ในเบราว์เซอร์เพื่อตรวจสอบ
如何判断背景图片是否正确加载？
หาก background image ไม่โหลด และเห็นข้อผิดพลาด 404 ใน Inspector สำหรับรูปภาพ แสดงว่ามีปัญหากับรูปภาพเอง
หากเป็นเช่นนี้ ให้ตรวจสอบอีกครั้งว่าชื่อไฟล์รูปภาพตรงกับไฟล์จริง และพาธใน background-image: url() ไปที่ตำแหน่งที่ถูกต้อง
ตำแหน่งไฟล์รูปภาพต้องเป็นพาธสัมพัทธ์เทียบกับตำแหน่งไฟล์ CSS เอง ไม่ใช่รากเว็บไซต์ ดังนั้น หากไฟล์ CSS อยู่ในซับโฟลเดอร์ พาธอาจต้องต่างจากกรณีที่ CSS อยู่ที่ราก
เพื่ออธิบายง่ายขึ้น สมมติโครงสร้างไฟล์เว็บไซต์ดังนี้:
(project folder) |-- index.html |-- (css) |-- style.css |-- (img) |-- cat-pic-1.jpgเว็บไซต์นี้มี index.html ที่รากโปรเจกต์ โฟลเดอร์ css ที่มี style.css และโฟลเดอร์ img ที่มีรูป cat-pic-1.jpg
ใน CSS หากต้องการโหลด cat-pic-1.jpg เป็น background image เส้นทางไฟล์ต้อง:
- ขึ้นไปหนึ่งระดับออกจากโฟลเดอร์
css - เข้าไปในโฟลเดอร์
img - โหลดไฟล์รูปภาพ
คุณสมบัติ background-image ในไฟล์ CSS ควรเป็น: background-image: url('../img/cat-pic-1.jpg')
สัญลักษณ์ ../ หมายถึงขึ้นไปหนึ่งระดับในโครงสร้างไฟล์
คุณสามารถทำได้อีกวิธีโดยตั้ง: background-image: url('/img/cat-pic-1.jpg')
วิธีนี้ใช้ forward slash (/) เริ่มจากรากเว็บไซต์ แล้วเข้าโฟลเดอร์ img โหลดไฟล์รูป
ไม่ว่าจะนำทางขึ้นโฟลเดอร์พาเรนท์หรือเริ่มจากรากเว็บไซต์ อย่าลืมใช้ Code Inspector ทดสอบตรวจสอบว่ารูปโหลดได้หรือ error 404
3. กำหนด width และ/หรือ height ของ element อย่างชัดเจน
หากรูปไม่แสดง แต่ไม่มี error 404 ให้เข้า Code Inspector ตรวจสอบ element เอง
หากไม่มีเนื้อหา HTML ใน element อาจมี width หรือ height เป็นศูนย์ (หรือทั้งคู่!) หมายถึงแม้ background image จะโหลดถูกต้อง element ก็อาจมองไม่เห็นเพราะขนาด 0px
ดูตัวอย่างข้างต้น เว็บไซต์และ Code Inspector หาก hover ที่ element .card__image ด้านขวา ป้ายกำกับจะปรากฏบน element ด้านซ้าย บอกว่ามี 354px width และ 0px height
Height 0px ทำให้ element ไม่มองเห็น
เพื่อแก้ไข ให้กำหนด height ของ element .card__image เป็น height: 120px หาก element อาจมีเนื้อหาข้อความความยาวต่างกัน ให้ใช้ min-height: 120px แทน จะมีความสูงขั้นต่ำ 120px แต่สามารถสูงกว่าได้หากข้อความต้องการพื้นที่มากขึ้น
4. ตรวจสอบว่าใช้ syntax ถูกต้องในคุณสมบัติ background ของ CSS
สิ่งสุดท้ายที่ต้องตรวจสอบคือ syntax ของคุณสมบัติ background CSS
นี่คือคุณสมบัติทั่วไปที่อาจใช้ พร้อมค่าที่เป็นไปได้:
background-color: #000000;background-image: url("/landscape1.jpg");background-position: center;background-repeat: no-repeat;background-size: cover;
คุณยังสามารถใช้ shorthand property background รวมค่าทั้งหมดในกฎสไตล์เดียว:
background: #000 center/cover url("/img/landscape1.jpg") no-repeat;หากใช้ shorthand property นี้กับค่าหลายค่า ให้แน่ใจว่า syntax ถูกต้อง ลำดับของคุณสมบัติ background ไม่สำคัญ แต่มีจุดสำคัญหนึ่งถ้าตั้งค่า background-size
ค่า background-size ใช้ได้ก็ต่อเมื่ออยู่ทันทีหลังค่า background-position โดยมี forward slash (/) คั่นระหว่างกัน ในตัวอย่างเขียนเป็น center/cover ซึ่ง center คือ background-position และ cover คือ background-size
คุณสามารถใช้ background-position เพียงอย่างเดียวได้ แต่หากพยายามใช้ cover เพียงอย่างเดียว กฎ CSS จะไม่ถูกต้อง และ ไม่มี คุณสมบัติ background ใดทำงานเลย
หากเกิดขึ้น คุณจะเห็นกฎที่ไม่ถูกต้องใน Code Inspector เช่นนี้:
