CSS background

Arun Panthong 14 February, 2017 css 1906

0 0 0

วิธีใช้ 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;
}