อันนี้เป็นการใส่ background อย่างง่าย สำหรับ beginner นะครับ

Q : เราจะใส่ แบ๊กกราวด์ ได้ยังไง
A :

โค๊ด: (backrgound-image)
body {
    background-image:url('ที่อยู่รูป ');
}
/* ที่ให้ใช้ background-image เพราะบางที background มันจะไม่ cross browser ครับ*/

Q : กรรมใส่แล้วรูปมันเรียงต่อกันอ่ะ อยากให้มันมีรูปเดียวนิ?
A : ตามปกติหากใส่ตามโค๊ดข้างบนมันจะเรียงต่อกันอัตโนมัติ แต่หากคุณต้องการให้มัน ไม่เรียงต่อกัน(คือรูปเดียวโดดๆนั้นแหละ)

โค๊ด: (background-repeat)
body{
   background:url(' รูปๆ') no-repeat;
}
/*----- หรือ -----*/
body{
   background-image:url('รูปๆ');
   background-repeat:no-repeat;
}

หากอยากให้มันเรียงไปแนวนอน ก็ให้เปลี่ยน no-repeat เป็น repeat-x นะครับ กรณีเดียวกันหากให้มันเรียงลงมาข้างล่างแนวดิ่ง ให้ก็ให้เปลี่ยนเป็น repeat-y ซะ
**tip**background-repeat จะไม่มี none ให้ใช้ no-repeat แทน

Q : แล้วๆๆถ้าอยากให้มัน อยู่กับที่เหมือน wallpaper หล่ะ?
A : ถ้าอยากให้มันอยู่กับที่เหมือน wallpaper ก็ให้ใส่ code นี้ครับ

โค๊ด: (background-attachment)
body{
 background-attachment:fixed;
}

อันนี้จะหมายถึง เกาะติดหน้าจอไว้เลย

Q : อยากให้มันมาอยู่ข้างล่างหง่า ทำไงดี?
A : นี่ก็อีกอย่างครับ ที่ควรรู้ไว้

โค๊ด: (background-position)
ิbody{
  background-position:right bottom;
}

ค่าของ attibrute นี้จะใช้ตรงตัวเลยครับ right bottom คือ ขวา ล่าง

ก็จบไปแล้วครับ สำหรับ bg ร้องไห้ ไว้แค่นี้ก่อนนะครับสำหรับ code แต่ง friend อยากถามตรงไหน ถามได้เลยฮับ

อ้อ ลืมบอกไปครับ เวลาเอามาใช้จริงๆนั้น ให้ใส่รวมกันเลยครับ เช่น ผมต้องการให้ bg รูปใหญ่ อยู่ตรงกลางจอ ไม่เลื่อนไปไหน ไม่เรียงซำกัน

โค๊ด: (full)
body{
  background-image:url('รูปๆๆ');
  background-position:center;
  background-repeat:no-repeat;
}

แบบสั้น

โค๊ด: (compact)
body{background:url('รูปๆๆ') no-repeat center;}

บทความใกล้เคียง

Leave a Reply