ทิปการใช้คำสั่ง CSS Background

การเสร้าง background หรือฉากหลังให้กับเว็บ จะ่ช่วยสร้างสีสรรได้มาก ไม่ว่าจะใส่สีให้กับ background หรือการใ่ส่รูปภาพ แต่คุณทราบหรือไม่ว่า เราสามารถใช้คำสั่ง background ได้อีกหลากหลายรูปแบบ โดยเฉพาะกับการใส่รูปภาพขนาดเล็กที่จะให้เรียงต่อๆ กันไป หรือจะให้ฉากหลังอยู่นิ่ง ไม่เลื่อนไปตามหน้าจอ และอื่นๆ อีก บทความนี้จะมาอธิบายให้เพื่อนๆ ได้เข้าใจ และลองนำไปใช้งานกันดูน่ะครับ

การจะพัฒนาเว็บให้เก่ง เราจำเป็นจะต้องอาศัยการทดสอบและดูผลลัพธ์ทีได้ว่า ตรงกับความเข้าใจของเราหรือเปล่า

คำสั่งย่อยๆ ของ CSS background

  • background-color
    สำหรับการกำหนดสีให้กับ background
    ตัวอย่างการใช้งาน :: body {background-color:#b0c4de;}
  • background-image
    สำหรับการกำหนดฉากหลังหรือ background โดยใช้รูปภาพแทน
    ตัวอย่างการใช้งาน :: body {background-image:url(‘mobile.jpg’);}
  • background-repeat
    สำหรับการกำหนดฉากหลังที่เป็นรูปภาพให้แสดงต่อเนื่องกันไป หรือแสดงเพียงภาพเดียวไม่ต่อเนื่อง
    ตัวอย่างการใช้งาน ::
    body
    {
    background-image:url(‘mobile.jpg’);
    background-repeat:repeat-x;
    }
  • background-attachment
    สำหรับการกำหนดรูปภาพฉากหลังให้เลื่อน/ไม่เลื่อนตามหน้าจอ
    ตัวอย่างการใช้งาน ::
    body
    {
    background-image:url(‘smiley.gif’);
    background-repeat:no-repeat;
    background-attachment:fixed;
    }
  • background-position
    สำหรับการกำหนดตำแหน่งของการแสดงฉากหลัง
    ตัวอย่างการใช้งาน ::
    body
    {
    background-image:url(‘mobile.jpg’);
    background-repeat:no-repeat;
    background-position:right top;
    }

ยังไงก็คงต้องบอกว่า ให้ทดสอบจากการใช้งานจริง เพราะจะทำให้เราเข้าใจคำสั่ง CSS ได้มากกว่านี้ครับ ส่วนสำหรับคนที่ใช้่เครื่องมือในการสร้างเว็บด้วย Joomla หรือ WordPress ก็สามารถนำความรู้นี้ไปประยุกต์ได้เช่นกัน เราอาจไมจำเป็นต้องเขียน CSS ใหม่ แต่สามารถแก้ไขหรือปรับปรงุให้ตรงกับความต้องการของเราได้เช่นกัน