<:: Closed { CSS ROOM }

ลำดับตอนที่ #56 : CSS Lesson >> #6 property background และที่เกี่ยวข้อง เพื่อกำหนดรูปแบบ bg

แช่แว้บ แช่แว้บ แช่แหว่ว แช่แหว่ว แช่แว้บ!

ฟ้าววว
สวัสดีครับทุกคน อิอิ
ตอนนี้ดีใจมากกกก ที่ได้ติดไฮไลท์ TT^TT
ขอบคุณพี่เว็บ อยากสุดซึ้งง

วันนี้เรามาเรียนการใช้ property background กัน ^^
อ๊ะๆ อย่าลืมโครงสร้าง

<style type="text/css">
Selector {property: value;}
</style>

สำคัญมากกๆๆๆ จะเตือนทุกตอนให้เบื่อไปเลย
เบื่อมากเมื่อไหร่แปลว่าจำขึ้นใจ ^^

เอาละ ต่อมา เรามาดูกันเล้ย ว่า property background ใช้ยังไงได้บ้าง

แบบที่ 1 Selector {background: url(...); }
แบบที่ 2 Selector {background: #โค้ดสี;}

ทำอะไรได้มากกว่านี้อีก แต่ค่อยๆ เป็นค่อยๆ ไปกันก่อน
มาดูทีละแบบน้า

แบบที่ 1 -- เป็นการกำหนดพื้นหลังให้เป็นรูปครับ ใส่ url ข้างในวงเล็บเลยๆ
แบบที่ 2 -- เป็นการกำหนดพื้นหลังให้เป็นสีครับ ใส่โค้ดสีเลย ^^

ทีนี้มาดูตัวอย่างการใช้กันดีกว่า ....
สมมุติว่า จะใส่ bg สีแดงให้เนื้อหาใน module (Selector คือ .modulebg2)

ก็จัดการแทนลงไปเล้ย

<style type="text/css">
.modulebg2 {background: #ff0000;}
</style>

แต่ไม่ใช่แค่นั้น! background สามารถกำหนดค่าต่างๆ ได้โคตรร เยอะ! (ผมก็รู้ไม่หมดเหมือนกัน หุหุ)
มาดูกันเล้ย

background-attachment
background-position
background-repeat

3 อันนี้เป็นอันหลักที่อยากให้รู้
background attachment คือการตั้งให้ล็อก/ไม่ล็อกบีจี เวลานำไปใช้ก็ประมาณนี้

<style type="text/css">
body {background: url(...); background-attachment: fixed;}
</style>

ครับ... ถ้าจะกำหนดให้ 1 Selector มีหลาย property ก็สามารถทำได้ โดยเว้น 1 ช่องแล้วพิมพ์ต่อ (จริงๆ ไม่ต้องเว้นก็ได้ แต่กันงง)

value ของ background-attachment ตั้งได้ ได้แก่ fixed,scroll,inherit
ผมไม่ค่อยทราบความต่างเท่าไหร่ fixed คือล็อกไว้กับที่ scroll คือเลื่อนตามสกอร์บาร์ ส่วน inherit น่าจะเป็น ไม่ตั้งค่า ครับ

อันอื่นก็ทำนองเดียวกันครับ
background-position ไว้สำหรับปรับตำแหน่งของ background
มี 2 แนวคือแนวตั้งและแนวนอน อาจจะฟังงงๆ ขอให้อ่านไปก่อน งิงิ

แนวตั้ง -- top คือ ติดด้านบน bottom คือ ติดด้านล่าง
แนวนอน -- left คือ ติดด้านซ้าย right คือ ติดด้านขวา center คือ อยู่ตรงกลาง

ปกติถ้าไม่ตั้งค่า ค่าจะมีเป็น top left นั่นคือติดมุมซ้ายบน
แน่นอนว่าคุณงงจนถึงตอนนี้ ต่อไปคุณจะไม่งง
เพราะนี่คือตัวอย่างการใช้ครับ

<style type="text/css">
body {background: url(...); background-position: top center;}
</style>

อันนี้คือจัดให้ติดด้านบนและอยู่ตรงกลาง
ถ้าจะให้ติดบนแล้วอยู่ซ้าย top left; อยู่ขวา top right;
ก็ใช้แนวๆ นี้แหละครับ
แต่อันนี้จะไม่ค่อยสำคัญเท่าไหร่ เพราะถ้าใช้ bg ใหญ่ๆ ตำแหน่งย่อมไม่เกี่ยวอยู่แล้ว
(เพราะมันคับจอแล้ว เหอๆ)

สุดท้ายคือ background-repeat คือการซ้ำของแบ็คกราวน์
จะไม่มีผลเท่าไหร่ถ้าบีจีเต็มจอ
มาดูดีกว่า ว่าใช้ value อะไรได้

ที่ได้คือ repeat-x,repeat-y,repeat,no-repeat,inherit
repeat-x คือซ้ำเฉพาะแนวนอน repeat-y คือซ้ำเฉพาะแนวตั้ง
repeat คือซ้ำทั้งแนวตั้งแนวนอน no-repeat คือไม่ซ้ำเลย
ส่วน inherit คือไม่กำหนดค่า

ตัวอย่าง การใช้.

<style type="text/css">
body {background: url(...); background-repeat: no-repeat;}
</style>

พอก่อนนะครับ เหนื่อยพิมพ์ หาวว