[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;
}

แบบที่ 3 IMG

// HTML
<img class="bg" src="images/bg.jpg" alt="">
// CSS
.bg {
   position: fixed; 
   top: 0; 
   left: 0; 
   /* Preserve aspet ratio */
   min-width: 100%;
   min-height: 100%;
}

ความแตกต่างระหว่าง background-size: cover กับ background-size: 100% 100% คือการแสดงผลของรูปภาพตาม viewport แบบ cover จะได้รูปแบบที่สมดุล ในขณะที่ 100% 100% จะได้ขนาดรูปภาพที่บีบตามขนาดของ viewport (แนะนำให้เปลี่ยนรูป background ตามขนาดหน้าจอหลัก desktop และ mobile)

background properties:

สามารถเขียนคุณสมบัติต่างๆ ได้ในคำสั่งเดียว

แบบย่อ

background: url(image/bg.jpg) no-repeat center center fixed;

แบบเต็ม

background-image: url(image/bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

เพื่อนๆ สามารถนำไปลองเล่นกันดูได้น่ะครับ สำหรับบทความนี้ก็หวังว่าจะมีประโยชน์ไม่มากก็น้อยน่ะครับ :)