เขียนหน้าเว็บที่มีพื้นหลังเต็มจอด้วย CSS
เว็บไซต์ที่มีพื้นหลังเต็มจอนั้นดูเหมือนเป็นอะไรที่น่าสนใจพอสมควร ยิ่งบางเว็บไซต์เลือกใช้รูปที่สวยสดงดงามมาประกอบพื้นหลังด้วยแล้วละก็ไม่ต้องพูดถึงเลยว่าจะสร้างความประทับใจแต่แรกพบให้ user ที่เข้ามาเว็บไซต์เราได้แค่ไหน “Full screen background CSS” หรือ พื้นหลังเต็มหน้าจอด้วย CSS นั้นดูเหมือนจะถูกพูดถึงวิธีการเขียน หรือ วิธีการทำอยู่บ่อยๆ บางครั้ง บางเทคนิคก็อาจจะใช้ไม่ได้ผล เลยต้องใช้ Javascript เข้ามาช่วยด้วย
See the Pen Full screen background by Jirayu L (@jir4yu) on CodePen.
ในบทความนี้ขอเขียนถึงวิธีการทำพื้นหลังเต็มจอด้วย CSS อย่างเดียว แบบง่ายๆ ไม่ต้องเปลือง code หลายบรรทัด แล้วก็ใช้ได้ผลกับพวก Web browser ใหม่ๆ ด้วยเช่นกัน
ผมขึ้นตัวอย่างไฟล์ HTML พื้นฐานที่จะเน้นส่วนที่เป็น class ที่ชื่อ fullscreen-block โดยที่ div ก้อนนี้ผมต้องการที่จะสร้างความสูง กับ ความยาวเท่าขนาดหน้าจอที่เรียกใช้งานเลย และจะใช้ภาพพื้นหลังเป็นรูปสวยๆ สักหนึ่งรูป จากนั้นก็เริ่มเขียน CSS ใส่เข้าไปตามนี้
เมื่อไปลองเปิดทดสอบใน web browser ก็จะได้หน้าเว็บที่เป็นสีน้ำเงินที่มีขนาดความกว้าง และ สูงเต็มหน้าจอพอดี โดยไม่ว่าจะย่อ หรือ ชยายยังไงก็จะแสดงผลเต็มหน้าจอเหมือนเดิม อธิบายจาก code CSS ด้านบนจะได้ว่า
100vw = 100% ของความกว้างหน้าจอ และ 100vh ก็พอจะเดาต่อไปได้ว่าคือ 100% ของความสูงหน้าจอ ซึ่งทั้งสองหน่วยย่อมาจาก viewport width และ viewport height โดยที่ไม่จำเป็นต้องไปกำหนด position ให้เป็น fixed, absolute แล้วก็ต้องกำหนด left, top อะไรเยอะแยะเหมือนเมื่อก่อนอีกต่อไป ทีนี้เราก็สามารถใส่รูปพื้นหลังได้แล้ว โดยการเปลี่ยน CSS เล็กน้อย
ทั้งนี้หากรูปที่เราเตรียมไว้มีขนาดเล็กเกินไป หรือ คิดว่าไม่พอดีกับขนาดหน้าจอใหญ่ๆ ก็สามารถใช้ background-size ของ CSS3 เข้ามาช่วยได้ เพียงเท่านี้ก็จะได้ full screen background ตามที่เราต้องการแล้ว โดยไม่จำเป็นต้องใช้ Javascript เลยแม้แต่บรรทัดเดียว
แก้ไข iOS, Safari, IE รุ่นเก่าบางรุ่น
เหมือนว่า iOS และ Safari รุ่นปัจจุบันยังไม่รองรับเทคโนโลยีดังกล่าว แต่เหมือนจะได้รับการแก้ไขในเวอร์ชั่น iOS 8 ที่จะถึงนี้ ในช่วงนี้เองหากเราต้องการจะทำให้เหล่า iDevices ทั้งหลาย และ IE รุ่นเก่าบางรุ่นสามารถใช้ Full screen background ได้ก็จำเป็นต้องเขียน Javascript เพื่อ hack ช่วยด้วย เช่น code ตัวอย่าง
อธิบายเบื้องต้นได้ว่า หากตรวจพบว่า user ใช้ iOS (บนอุปกรณ์เคลื่อนที่) หรือ Safari ให้ใช้ฟังก์ชั่น iOSVhHeightBug ซึ่งในฟังก์ชั่นนี้เองจะคำนวณขนาดหน้าจอความกว้าง และ สูงด้วย Javascript ใส่ตัวแปรไว้ก่อน จากนั้นก็ให้ element ดังกล่าวมีความกว้าง และ สูง ตามค่าของตัวแปรนั้น (ผู้ใช้ควรเปลี่ยนชื่อ element จาก post-block ในตัวอย่างเป็นอย่างอื่น)
code ข้างต้นจะมีการหน่วงเวลาประมาณ 1 วินาทีเศษ เพื่อให้ script ทำงานไม่ผิดพลาด หรือ ไปชนกับ page load อื่นๆ และ เมื่อใดก็ตามที่ user ทำการหมุนหน้าจอ (หรือ ดึง web broswer เพื่อ test responsive) ก็จะเรียกฟังก์ชั่นให้ทำการทุกๆ การเปลี่ยนขนาด เท่านี้เองครับ เทคนิคนี้อาจจะใช้กับ web browser อื่นๆที่เราอยากจะเจาะจงลงไปได้ด้วย ลองนำไปประยุกต์กันดูนะ