วิธีใส่ background เบื้องต้น
อันนี้เป็นการใส่ background อย่างง่าย สำหรับ beginner นะครับ
Q : เราจะใส่ แบ๊กกราวด์ ได้ยังไง
A :
body {
background-image:url('ที่อยู่รูป ');
}
/* ที่ให้ใช้ background-image เพราะบางที background มันจะไม่ cross browser ครับ*/
Q : กรรมใส่แล้วรูปมันเรียงต่อกันอ่ะ อยากให้มันมีรูปเดียวนิ?
A : ตามปกติหากใส่ตามโค๊ดข้างบนมันจะเรียงต่อกันอัตโนมัติ แต่หากคุณต้องการให้มัน ไม่เรียงต่อกัน(คือรูปเดียวโดดๆนั้นแหละ)
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 นี้ครับ
body{
background-attachment:fixed;
}
อันนี้จะหมายถึง เกาะติดหน้าจอไว้เลย
Q : อยากให้มันมาอยู่ข้างล่างหง่า ทำไงดี?
A : นี่ก็อีกอย่างครับ ที่ควรรู้ไว้
ิbody{
background-position:right bottom;
}
ค่าของ attibrute นี้จะใช้ตรงตัวเลยครับ right bottom คือ ขวา ล่าง
ก็จบไปแล้วครับ สำหรับ bg
ไว้แค่นี้ก่อนนะครับสำหรับ code แต่ง friend อยากถามตรงไหน ถามได้เลยฮับ
อ้อ ลืมบอกไปครับ เวลาเอามาใช้จริงๆนั้น ให้ใส่รวมกันเลยครับ เช่น ผมต้องการให้ bg รูปใหญ่ อยู่ตรงกลางจอ ไม่เลื่อนไปไหน ไม่เรียงซำกัน
body{
background-image:url('รูปๆๆ');
background-position:center;
background-repeat:no-repeat;
}
แบบสั้น
body{background:url('รูปๆๆ') no-repeat center;}