ภาษามาร์กอัป HTML ช่วยให้นักออกแบบเว็บไซต์ใช้รูปภาพใดก็ได้เป็นภาพพื้นหลัง อย่างไรก็ตาม ภาษานั้นขาดการควบคุมในตัวสำหรับภาพพื้นหลัง การปรับแต่งเพิ่มเติมทำได้โดยใช้สไตล์ชีต CSS แบบเรียงซ้อน
คำแนะนำ
ขั้นตอนที่ 1
ในการทำให้พื้นหลังขยายเต็มความกว้างของเบราว์เซอร์ คุณต้องใช้พารามิเตอร์ z-index ใน CSS ของคุณ ช่วยให้คุณกำหนดลำดับขององค์ประกอบที่คุณสร้างได้ ยิ่งค่าของแอตทริบิวต์นี้สูงเท่าใด บล็อกก็จะยิ่งอยู่ในหน้าเว็บมากขึ้นเท่านั้น
ขั้นตอนที่ 2
สร้างเอกสารใหม่ในรูปแบบ html และ css (ปุ่มเมาส์ขวา - "ใหม่" - "ไฟล์ข้อความ") และเปิดเอกสารโดยใช้โปรแกรมแก้ไขข้อความใดๆ
ขั้นตอนที่ 3
วางภาพพื้นหลังไว้ที่ชั้นล่างสุด มันจะยืดขึ้นอยู่กับความละเอียดหน้าจอ ที่ด้านบนจะมีองค์ประกอบอื่นซึ่งจะแสดงเนื้อหาของหน้า เมื่อต้องการทำสิ่งนี้ ให้สร้างสองช่วงตึก ในไฟล์ css เขียน:.1layer {z-index: 1; width: 100% height: 100% position: absolute;} 2layer {Position: absolute; z-index: 2; } ตำแหน่ง: พารามิเตอร์แบบสัมบูรณ์ช่วยให้คุณกำหนดตำแหน่งที่แน่นอนได้ เช่น เลเยอร์จะอยู่ในตำแหน่งที่เป็นอิสระจากองค์ประกอบอื่นๆ
ขั้นตอนที่ 4
รวมโค้ด CSS ที่สร้างขึ้นในไฟล์ HTML โดยใช้แท็กลิงก์: พื้นหลังของหน้า
ขั้นตอนที่ 5
สร้างเลเยอร์ใหม่ การใช้แท็ก
วางรูปภาพไว้บนนั้น ตัวอย่างเช่น: เนื้อหาของหน้า สำหรับ img จะระบุเฉพาะพารามิเตอร์ความกว้าง เนื่องจากหากคุณระบุความสูงเพิ่มเติม ในบางเบราว์เซอร์ การบิดเบือนของภาพจะปรากฏขึ้น
ขั้นตอนที่ 6
บันทึกการเปลี่ยนแปลงของคุณ หากต้องการทดสอบโค้ด ให้ขยายหน้าในหน้าต่างเบราว์เซอร์ ภาพพื้นหลังควรขยายให้ใหญ่ขึ้นด้วย