วิธีเปลี่ยนภาพพื้นหลังเว็บไซต์ Joomla ให้แสดงผลสวยทุกหน้าจอ

เปลี่ยนภาพพื้นหลัง Joomla ได้จากตัวเลือกของเทมเพลต หากมีให้ หรือเพิ่ม CSS ในไฟล์กำหนดเองของเทมเพลต วิธีที่เหมาะสมขึ้นอยู่กับว่าต้องการเปลี่ยนพื้นหลังทั้งเว็บไซต์ เฉพาะส่วนหัว หรือเฉพาะบางหน้า ก่อนปรับควรย่อและบีบอัดภาพให้เหมาะกับเว็บ แล้วตรวจการแสดงผลบนมือถือและคอมพิวเตอร์

❶ เตรียมภาพพื้นหลังก่อนอัปโหลด

เลือกภาพให้สอดคล้องกับเนื้อหาและไม่รบกวนการอ่านข้อความ

① เลือกภาพที่มีขนาดเหมาะสม

ภาพขนาดใหญ่เกินไปอาจทำให้หน้าเว็บโหลดช้า ส่วนภาพเล็กเกินไปอาจแตกเมื่อขยายเต็มหน้าจอ ปรับขนาดภาพให้เหมาะกับพื้นที่ใช้งานและบีบอัดไฟล์ก่อนนำขึ้นเว็บไซต์

② เลือกภาพที่ไม่แย่งความสนใจจากเนื้อหา

ภาพพื้นหลังที่มีรายละเอียดมากอาจทำให้ตัวอักษรอ่านยาก เลือกภาพที่มีพื้นที่เรียบหรือโทนสีสงบตรงบริเวณที่วางข้อความ

③ ตั้งชื่อไฟล์ให้สื่อความหมาย

ใช้ชื่อไฟล์ภาษาอังกฤษที่สั้นและบอกเนื้อหา เช่น website-background.jpg เพื่อให้ง่ายต่อการค้นหาและจัดการภายหลัง

❷ ตรวจตัวเลือกของเทมเพลตก่อนใช้ CSS

เทมเพลตบางชุดมีช่องเลือกภาพพื้นหลังหรือปรับสีใน Template Style ให้เข้าไปที่ System → Templates Panel → Site Templates Styles แล้วเปิดสไตล์ที่เว็บไซต์ใช้อยู่ ตรวจตัวเลือกในแท็บต่าง ๆ โดยเฉพาะส่วน Advanced หรือส่วนที่เกี่ยวกับ Background และ Header

หากมีตัวเลือกภาพพื้นหลัง ให้เลือกไฟล์จากคลังสื่อ บันทึก แล้วเปิดหน้าเว็บไซต์ตรวจผล วิธีนี้สะดวกและลดโอกาสแก้โค้ดผิดตำแหน่ง

❸ เพิ่มภาพพื้นหลังด้วย CSS

หากเทมเพลตไม่มีตัวเลือกที่ต้องการ สามารถเพิ่ม CSS ในไฟล์กำหนดเองที่เทมเพลตรองรับ เช่น user.css ใน Cassiopeia

① สำรองไฟล์ก่อนแก้ไข

สำรองไฟล์ CSS ที่จะแก้ และตรวจคู่มือของเทมเพลตว่าควรวาง CSS กำหนดเองไว้ที่ใด หลีกเลี่ยงการแก้ไฟล์หลักโดยตรง เพราะการอัปเดตอาจเขียนทับการเปลี่ยนแปลง

② ตั้งภาพเป็นพื้นหลังทั้งหน้า

ตัวอย่าง CSS สำหรับพื้นหลังทั้งเว็บไซต์:

body {
  background-image: url("/images/website-background.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

เปลี่ยน /images/website-background.jpg ให้เป็นตำแหน่งไฟล์จริงของคุณ ค่า cover ช่วยให้ภาพเต็มพื้นที่โดยคงสัดส่วน แต่อาจตัดขอบบางส่วน ส่วน fixed อาจทำงานต่างกันบนมือถือ จึงควรทดสอบกับอุปกรณ์จริง

③ ตั้งภาพเฉพาะส่วนหัว

ถ้าต้องการเปลี่ยนเฉพาะส่วนหัว ให้ใช้ตัวเลือกพื้นหลังของ Header หากเทมเพลตมี หรือกำหนด CSS โดยใช้ชื่อคลาสของเทมเพลตนั้น ตัวอย่าง Cassiopeia ใช้คลาส .container-header:

.container-header {
  background-image: url("/images/header-background.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

ชื่อคลาสนี้เป็นตัวอย่างสำหรับ Cassiopeia เทมเพลตอื่นอาจใช้ชื่อไม่เหมือนกัน ตรวจสอบชื่อคลาสก่อนนำไปใช้

❹ ปรับให้แสดงผลดีทุกหน้าจอ

① ตรวจตำแหน่งและการครอบตัด

เปิดหน้าเว็บบนหน้าจอหลายขนาด แล้วดูว่าจุดสำคัญในภาพยังอยู่ในตำแหน่งที่เหมาะสมหรือไม่ หากภาพถูกครอบมากเกินไป อาจเปลี่ยนภาพหรือปรับ background-position เช่น center top

② ตรวจสีและความอ่านง่าย

ดูข้อความ ลิงก์ และปุ่มบนภาพ หากอ่านยาก ให้เลือกภาพที่เรียบขึ้นหรือเพิ่มพื้นหลังสีให้ส่วนเนื้อหา เพื่อให้มีความแตกต่างระหว่างตัวอักษรกับภาพอย่างเพียงพอ

③ ตรวจความเร็วและแคช

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

❺ แก้ปัญหาภาพพื้นหลังไม่แสดง

① ตรวจที่อยู่ไฟล์

เปิดตำแหน่งไฟล์ในเบราว์เซอร์เพื่อตรวจว่ามีไฟล์จริง หาก Joomla ติดตั้งอยู่ในโฟลเดอร์ย่อย เส้นทางที่ขึ้นต้นด้วย /images/ อาจต้องปรับให้ตรงกับตำแหน่งเว็บไซต์

② ตรวจว่า CSS ถูกโหลดหรือไม่

ตรวจว่าบันทึกไฟล์ CSS ถูกตำแหน่งและเทมเพลตโหลดไฟล์นั้นอยู่ หากมี CSS หลายชุด กฎจากไฟล์อื่นอาจเขียนทับค่าพื้นหลัง

③ ตรวจชื่อคลาสและตัวเลือกของเทมเพลต

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

สำหรับเว็บไซต์ที่ ComSiam ดูแล ควรเก็บภาพต้นฉบับและไฟล์ CSS สำรองไว้ก่อนปรับ เพื่อให้ย้อนกลับได้หากภาพหรือรูปแบบไม่เหมาะกับหน้าเว็บจริง

❻ สรุป

เริ่มจากตรวจตัวเลือกพื้นหลังใน Template Style ก่อน หากไม่มีจึงเพิ่ม CSS ในไฟล์กำหนดเองของเทมเพลต เลือกภาพที่เหมาะกับเนื้อหา บีบอัดไฟล์ และตรวจตำแหน่งภาพ ความอ่านง่าย และความเร็วบนมือถือกับคอมพิวเตอร์ หลังปรับแล้วควรทดสอบทุกหน้าที่ใช้เทมเพลตนั้นก่อนเผยแพร่