วิธีการ - ภาพเต็มหน้า
เรียนรู้วิธีสร้างภาพพื้นหลังแบบเต็มหน้าด้วย CSS
ภาพเต็มหน้า
เรียนรู้วิธีสร้างภาพพื้นหลังที่ครอบคลุมหน้าต่างเบราว์เซอร์ทั้งหมด ตัวอย่างต่อไปนี้แสดงภาพพื้นหลังแบบตอบสนองแบบเต็มหน้าจอ (และครึ่งหน้าจอ)
การสาธิต - ภาพพื้นหลังแบบเต็มหน้า
วิธีสร้างรูปภาพที่มีความสูงเต็ม
ใช้องค์ประกอบคอนเทนเนอร์และเพิ่มรูปภาพพื้นหลังให้กับคอนเทนเนอร์ด้วยheight: 100%
.
เคล็ดลับ:ใช้ 50% เพื่อสร้างภาพพื้นหลังครึ่งหน้า จากนั้นใช้คุณสมบัติพื้นหลังต่อไปนี้เพื่อจัดกึ่งกลางและปรับขนาดภาพให้สมบูรณ์:
หมายเหตุ:เพื่อให้แน่ใจว่ารูปภาพครอบคลุมทั้งหน้าจอ คุณต้องนำไปใช้height: 100%
กับทั้ง <html> และ <body>:
ตัวอย่าง
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
ภาพพื้นหลังครึ่งหน้า:
ตัวอย่าง
.bg {
height: 50%;
}