Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer]

ลำดับตอนที่ #91 : [lesson] CSS > Styling Background ... ใส่สไตล์ให้พื้นหลัง (1)

Properties ของ Background ที่น่าสนใจมีดังนี้
    - background-color
    - background-image
    - background-repeat
    - background-attachment
    - background-position

เราจะมีอธิบายไปทีละอย่างนะคะ

อ้างอิง
http://www.w3schools.com/css/css_background.asp


Background Color กำหนดค่าสีของพื้นหลัง

ค่าสีก็สามารถระบุได้สามแบบค่ะ...
    * name - เป็นชื่อตรงๆ อย่างเช่น "red" (ใช้คำว่า "แดง" ภาษาไทยไม่ได้นะ)
    * RGB - เป็นค่าสีแสงตามหลักฟิสิกส์ทั้งสาม เช่น "rgb(255,0,0)"
    * Hex - เป็นเลขฐานสิบหก เช่น "#ff0000"

ตัวอย่างเวลานำมาใช้จริงในโค้ด...

<style type="text/css">
h1 {background-color:red;}
p {background-color:rgb(255,0,0);}
div {background-color:#ff0000;}
</style>

จะออกมาเป็นสีแดงเหมือนกันทั้งหมดค่ะ

ถ้าหากว่าอยากให้พื้นหลังเป็นสีใส มองทะลุผ่านได้ ก็ตั้งค่าเป็น transparent นะคะ

<style type="text/css">
td {background-color:transparent;}
</style>


Background Image ใส่ภาพให้พื้นหลัง

<style type="text/css">
body {background-image:url('http://image.dek-d.com/21/815724/100232466');}
</style>
โค้ดตัวอย่าง bg ของหน้านี้

ในวงเล็บของ url จะใช้ ' ' หรือ " " คร่อมก็ได้ค่ะ (ใช้อัญประกาศเดี่ยว หรืออัญประกาศคู่ก็ได้) แต่ถ้าเลือกใช้อันไหนเป็นตัวเปิดแล้วก็ต้องใช้ตัวปิดให้เหมือนกัน

ถ้าหากว่าทำการกำหนดทั้ง properties background-color และ background-image สีก็อยู่หลังภาพค่ะ
บางครั้งก่อนโหลดภาพเสร็จ เราจึงเห็นสี background-color ที่กำหนดไว้
ถ้าใช้ png ภาพกึ่งโปร่งใส ก็จะเห็นสีด้วยแน่นอน

หากต้องการเอาภาพพื้นหลังออกไปก็ใส่โค้ดแบบนี้ค่ะ

<style type="text/css">
body {background-image:none;}
</style>


Background Repeat ต่อภาพพื้นหลังแบบกระเบื้อง

หากว่าภาพพื้นหลังของเราเล็กกว่าพื้นที่แสดงผล การตั้งค่า background-repeat ก็ช่วยเพิ่มลูกเล่นให้หลายอย่างค่ะ

แต่ว่าหัวข้อนี้ และหัวข้อที่เหลือของ background ขอไปต่อตอนต่อไปนะคะ ^^
ต้องเตรียมตัวอย่างเยอะทีเดียว...