ภาพพื้นหลัง HTML
สามารถระบุภาพพื้นหลังสำหรับองค์ประกอบ HTML เกือบทั้งหมด
ภาพพื้นหลังบนองค์ประกอบ HTML
ในการเพิ่มรูปภาพพื้นหลังในองค์ประกอบ HTML ให้ใช้styleแอตทริบิวต์ HTML และคุณสมบัติ CSS background-image:
ตัวอย่าง
เพิ่มรูปภาพพื้นหลังในองค์ประกอบ HTML:
<div style="background-image: url('img_girl.jpg');">
คุณยังสามารถระบุภาพพื้นหลังใน<style>
องค์ประกอบ ใน<head>
ส่วน:
ตัวอย่าง
ระบุภาพพื้นหลังใน<style>
องค์ประกอบ:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
ภาพพื้นหลังบนเพจ
หากคุณต้องการให้ทั้งหน้ามีภาพพื้นหลัง คุณต้องระบุภาพพื้นหลังใน<body>องค์ประกอบ:
ตัวอย่าง
เพิ่มภาพพื้นหลังสำหรับทั้งหน้า:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
เล่นซ้ำพื้นหลัง
หากภาพพื้นหลังมีขนาดเล็กกว่าองค์ประกอบ รูปภาพจะเล่นซ้ำในแนวนอนและแนวตั้ง จนกว่าจะถึงจุดสิ้นสุดขององค์ประกอบ
ตัวอย่าง
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
เพื่อหลีกเลี่ยงไม่ให้ภาพพื้นหลังเกิดซ้ำ ให้ตั้งค่าbackground-repeatคุณสมบัติno-repeatเป็น
ตัวอย่าง
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
ปกพื้นหลัง
หากคุณต้องการให้ภาพพื้นหลังครอบคลุมทั้งองค์ประกอบ คุณสามารถตั้งค่าbackground-sizeคุณสมบัติเป็น
cover.
นอกจากนี้ เพื่อให้แน่ใจว่าครอบคลุมองค์ประกอบทั้งหมดเสมอ ให้ตั้งค่า
background-attachmentคุณสมบัติเป็นfixed:
ด้วยวิธีนี้ ภาพพื้นหลังจะครอบคลุมทั้งองค์ประกอบโดยไม่มีการยืดออก (ภาพจะคงสัดส่วนเดิมไว้):
ตัวอย่าง
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
พื้นหลังยืด
หากคุณต้องการให้ภาพพื้นหลังขยายให้พอดีกับองค์ประกอบทั้งหมด คุณสามารถตั้งค่าbackground-sizeคุณสมบัติเป็น
100% 100%:
ลองปรับขนาดหน้าต่างเบราว์เซอร์ แล้วคุณจะพบว่าภาพจะยืดออก แต่จะครอบคลุมทั้งองค์ประกอบเสมอ
ตัวอย่าง
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
เรียนรู้เพิ่มเติม CSS
จากตัวอย่างข้างต้น คุณได้เรียนรู้ว่าภาพพื้นหลังสามารถจัดรูปแบบได้โดยใช้คุณสมบัติพื้นหลัง CSS
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติพื้นหลัง CSS ให้ศึกษา บทช่วย สอนพื้นหลัง CSSของ เรา