วิธีใช้ background
Css background ใช้สำหรับกำหนดคุณสมบัติของพื้นหลังให้กับองค์ประกอบนั้นๆ ที่เราต้องการ เรามาดูกันเลยว่าคุณสมบัติของ CSS background นั่นมีอะไรบ้าง และควรใช้เมื่อใด
1. background-color (สีพื้นหลังขององค์ประกอบ)
2. background-image (ภาพที่ใช้สำหรับเป็นพื้นหลัง)
3. background-repeat (นิยมใช้ควบคู่กับรูปภาพ
- repeat จะแสดงผลออกมาจนเต็มเอกสารที่เรากำหนดไว้
- repeat-x คำสั่งก็จะสั่งให้แสดงรูปนั้นๆ ไปแนวนอนโดยจะแสดงจนกว่าจะเต็มพื้นที่ของเอกสาร หากใช้คำสั่ง
- repeat-y ก็จะแสดงรูปนั่นๆ ออกมาเรื่อยๆ โดยจะแสดงผลทางแนวตั้ง )
- no-repeat จะแสดงผลออกมาแค่รูปเดียว
4. background-attachment (ใช้ควบคู่กับรูปภาพ เช่นเดียวกันเพียงแต่จะสามารถกำหนดให้รูปภาพนั้นอยู่กับที่ หรือเคลื่อนที่ตาม)
5. background-position (ใช้สำหรับระบุตำแหน่ง)
ตัวอย่าง background-color :
body {
background-color:#fff;
}
div {
background-color:#eee;
}
ตัวอย่าง background-image :
body {
background-image: url("my-picture.png");
}
ตัวอย่าง background-repeat :
body {
background-image: url("my-picture.png");
/* ตัวอย่าง รูปแบบการใช้งาน */
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
}
ตัวอย่าง background-attachment :
body {
background-image: url("my-picture.png");
background-attachment: fixed;
}
ตัวอย่าง background-position :
body {
background-image: url("my-picture.png");
background-repeat: no-repeat;
background-position: left top;
background-position: fixed;
}