เนื่องจากผู้เขียนเปิดตัวคอลเลกชันของการออกแบบเว็บพื้นหลังขนาดใหญ่ฉันได้รับอีเมลจำนวนมากเพื่อขอให้ใช้ CSS เพื่อใช้งานการออกแบบเว็บพื้นหลังขนาดใหญ่ ดังนั้นฉันจึงตัดสินใจแบ่งปันทักษะการออกแบบของเว็บไซต์กับคุณในพื้นหลัง ในบทช่วยสอนนี้ฉันจะใช้ตัวอย่างบางส่วนเพื่อแสดงวิธีใช้รูปภาพหนึ่งหรือสองภาพเพื่อใช้การออกแบบเว็บไซต์พื้นหลังขนาดใหญ่
ความผิดพลาดที่เกิดขึ้นบ่อยครั้ง: พื้นหลังถูกตัด
เมื่อดูไฟล์ตัวอย่างไม่มีปัญหาเมื่อมีความละเอียดน้อยกว่า 1280 แต่ถ้าจอภาพของคุณมีความละเอียดมากกว่า 1280 พิกเซลคุณจะเห็นชิ้นส่วนนอกอิมเมจพื้นหลัง
ทางออกที่ง่ายสำหรับปัญหา: ตั้งค่าสีของขอบของภาพเป็นสีเดียวกับพื้นหลังของหน้าเว็บ ที่นี่ฉันใช้ Web Designer Wall เป็นตัวอย่างดูที่ภาพด้านล่างและทราบว่าขอบของภาพเป็นสีทึบ
ส่วน CSS
ส่วนนี้ง่ายตั้งค่าภาพพื้นหลังสำหรับองค์ประกอบร่างกาย (อยู่ตรงกลางด้านบน)
นี่คือรหัส CSS:
| ร่างกาย { Padding: 0; มาร์จิ้น: 0; ความเป็นมา: #F8F7E5 URL (WDW-BG.JPG) ศูนย์กลางที่ไม่มีการทำซ้ำ ความกว้าง: 100%; แสดง: ตาราง; - |
ให้ความสนใจกับความจริงที่ว่ามีสองบรรทัดพิเศษในตัวเลือกร่างกายเพื่อให้ภาพพื้นหลังเปลี่ยนไปเมื่อหน้าต่างเบราว์เซอร์มีขนาดเล็กกว่าความกว้างของเนื้อหาซึ่งจะปรากฏใน Firefox
