[Trick] Full Screen Background Image

การทำพื้นหลังเป็นรูปภาพนั้นเป็นรูปแบบหนึ่งที่ได้รับความนิยมในการเขียนเว็บไซต์ให้ดูสวยงาม มีลูกเล่น สำหรับบทความนี้จะมาแนะนำวิธีทำพื้นหลังเป็นรูปภาพบนเว็บไซต์กันครับ ++

---

การทำพื้นหลังเป็นรูปภาพนั้นสามารถทำได้หลายแบบ ในบทความนี้ขอแนะนำ 3 แบบที่ใช้งานบ่อย ๆ

แบบที่ 1 BODY

body {
   background: url('image/bg.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
/* or */
body {
   background: url('image/bg.jpg') no-repeat center center;
   -webkit-background-size: 100% 100%;
   -moz-background-size: 100% 100%;
   -o-background-size: 100% 100%;
   background-size: 100% 100%;
}

แบบที่ 2 DIV

// HTML
<div class="bg">
...
</div>
// CSS
.bg {
    background-image: url('image/bg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
    background-size: cover; /* or 100% 100% */
    height: 100vh;
}