ความสามารถในการขยายภาพพื้นหลังให้เต็มความกว้างของหน้าต่างเบราว์เซอร์โดยใช้ CSS นั้นปรากฏขึ้นเมื่อมีการเปิดตัวข้อกำหนดล่าสุด - CSS3 เท่านั้น น่าเสียดายที่นักท่องเว็บจำนวนมากใช้เบราว์เซอร์รุ่นแรกๆ ที่ไม่เข้าใจข้อกำหนด CSS3 ดังนั้น คุณต้องทำการเลือก - ใช้โซลูชันข้ามเบราว์เซอร์ที่สะดวกน้อยกว่า แต่ข้ามเบราว์เซอร์ หรือไฮเทค แต่สำหรับผู้ชมที่จำกัด ลองพิจารณาทั้งสองตัวเลือก
จำเป็น
ความรู้พื้นฐานเกี่ยวกับ HTML และ CSS
คำแนะนำ
ขั้นตอนที่ 1
ตัวเลือกแรกขึ้นอยู่กับข้อกำหนดก่อนหน้าของภาษา CSS คุณต้องสร้างโครงสร้างโค้ด HTML ที่มีสองชั้นทับซ้อนกัน ชั้นหนึ่งอยู่เหนือชั้นอื่น เลเยอร์ (div) สามารถขยายได้ถึงความกว้างของหน้าจอในข้อกำหนดภาษาคำอธิบายรูปแบบการเรียงซ้อนแบบเก่า ที่ด้านล่างของเลเยอร์ คุณต้องวางภาพพื้นหลัง และด้านบนสุดจะวางเนื้อหาทั้งหมดของหน้า โครงสร้างดังกล่าวในเนื้อหาของเอกสารอาจมีลักษณะดังนี้:
นี่จะเป็นเนื้อหาของเพจ
และคำอธิบายของรูปแบบสำหรับโครงสร้างนี้ควรอยู่ในส่วนหัว ตัวอย่างเช่นสิ่งนี้:
html เนื้อหา {
ระยะขอบ: 0px;
ความสูง: 100%;
}
#พื้นหลัง {
ตำแหน่ง: แน่นอน;
ความกว้าง: 100%;
ความสูง: 100%;
}
#ร่างกาย {
ตำแหน่ง: แน่นอน;
ความกว้าง: 100%;
ความสูง: 100%;
ดัชนี z: 2;
}
ที่นี่ เลเยอร์ที่มีพื้นหลัง ID (นี่คือภาพพื้นหลังของคุณ) และเนื้อหา (นี่คือเลเยอร์สำหรับเนื้อหาของหน้า) ถูกตั้งค่าเป็นตำแหน่งที่แน่นอนและความกว้างและความสูง 100% นอกจากนี้ เลเยอร์เนื้อหายังได้รับหมายเลขซีเรียล z-index = 2 ซึ่งจะกำหนด "ความลึก" ของเลเยอร์ - ยิ่งมีขนาดใหญ่เท่าใด เลเยอร์นี้ก็จะยิ่งห่างจาก "ด้านล่าง" มากขึ้นเท่านั้น ในกรณีของเรา เลเยอร์ดังกล่าวจะอยู่เหนือเลเยอร์พื้นหลัง ซึ่งใช้ดัชนี z ที่เป็นค่าเริ่มต้น
ขั้นตอนที่ 2
รหัสที่สมบูรณ์อาจมีลักษณะดังนี้:
html เนื้อหา {
ระยะขอบ: 0px;
ความสูง: 100%;
}
#พื้นหลัง {
ตำแหน่ง: แน่นอน;
ความกว้าง: 100%;
ความสูง: 100%;
}
#ร่างกาย {
ตำแหน่ง: แน่นอน;
ความกว้าง: 100%;
ความสูง: 100%;
ดัชนี z: 2;
}
นี่จะเป็นเนื้อหาของเพจ
อย่าลืมเปลี่ยนชื่อไฟล์ภาพพื้นหลัง fon.png
ขั้นตอนที่ 3
ตัวเลือกที่สองจะใช้คุณสมบัติขนาดพื้นหลังที่แนะนำใน CSS3 ในเวลาเดียวกัน เพิ่มคุณสมบัติที่คล้ายกันให้กับคำจำกัดความของสไตล์ที่เบราว์เซอร์ Mozilla Firefox, Google Chrome และ Opera ใช้ก่อนหน้านี้ บล็อกคำอธิบายสไตล์ในเวอร์ชันนี้อาจมีลักษณะดังนี้:
html {
พื้นหลัง: url (fon.png) ไม่มีศูนย์ซ้ำศูนย์คงที่;
-webkit-พื้นหลัง-ขนาด: ปก;
-moz-พื้นหลัง-ขนาด: ปก;
-o-ขนาดพื้นหลัง: ปก;
ขนาดพื้นหลัง: ปก;
}
และอย่าลืมเปลี่ยนชื่อไฟล์ภาพพื้นหลัง fon.png"