ข้อผิดพลาดทั่วไป: พื้นหลังถูกครอบตัด
เมื่อดูไฟล์ตัวอย่าง จะไม่มีปัญหาเมื่อความละเอียดน้อยกว่า 1280 แต่หากจอภาพของคุณมีความละเอียดสูงกว่า 1280 พิกเซล คุณจะเห็นส่วนอื่นๆ ที่ไม่ใช่ภาพพื้นหลัง
วิธีแก้ไขปัญหาง่ายๆ: ตั้งค่าสีขอบของรูปภาพให้เป็นสีเดียวกับสีพื้นหลังของหน้าเว็บ ที่นี่ฉันใช้ Web Designer Wall เป็นตัวอย่าง ดูภาพด้านล่าง
ส่วน CSS
ส่วนนี้ง่ายมาก ตั้งค่าภาพพื้นหลังสำหรับองค์ประกอบเนื้อหา (ตำแหน่งตรงกลาง ด้านบน)
ต่อไปนี้เป็นรหัส CSS:
ร่างกาย { ช่องว่างภายใน: 0; ระยะขอบ: 0; พื้นหลัง: #f8f7e5 url(wdw-bg.jpg) ไม่ซ้ำตรงกลางด้านบน; ความกว้าง: 100%; จอแสดงผล: ตาราง; } |
โปรดทราบว่ามีสองบรรทัดเพิ่มเติมในตัวเลือกเนื้อหา ทั้งนี้เพื่อป้องกันไม่ให้รูปภาพพื้นหลังเปลี่ยนแปลงเมื่อหน้าต่างเบราว์เซอร์เล็กกว่าความกว้างของเนื้อหา ซึ่งจะเกิดขึ้นใน Firefox